Proyectos de Subversion Moodle

Rev

Rev 1 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
/* 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;
1441 ariadna 71
  text-decoration: none;
1 efrain 72
 
73
  &:focus {
74
    border-radius: $btn-border-radius;
75
  }
76
}
77
 
78
[data-eventtype-hidden="true"] {
79
  opacity: .4;
80
}
81
 
82
.popover {
83
  .event-icon {
84
    display: inline-flex !important;
85
    align-items: center;
86
    justify-content: center;
87
 
88
    padding: 0;
89
    margin-right: .5rem;
90
    border-radius: $btn-border-radius;
91
    background-color: $container-bg;
92
 
93
    font-weight: $font-weight-medium;
94
 
95
    .icon {
96
      width: 30px;
97
      height: 30px;
98
    }
99
  }
100
}
101
 
102
 
103
.calendarmonth {
104
  .day {
105
 
106
    .calendar_event_,
107
    .calendar_event_category,
108
    .calendar_event_course,
109
    .calendar_event_site,
110
    .calendar_event_group,
111
    .calendar_event_user,
112
    .calendar_event_close,
113
    .calendar_event_due {
114
      border: 0;
115
    }
116
 
117
    .calendar_event_due,
118
    .calendar_event_other {
119
      background-color: $calendarEventOtherColor;
120
    }
121
 
122
    .calendar_event_open {
123
      margin-top: 22px;
124
      position: relative;
125
 
126
      &::after {
127
        content: '';
128
        background-color: $green-200;
129
        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");
130
        background-position: center;
131
        background-repeat: no-repeat;
132
        background-size: 16px;
133
        position: absolute;
134
        top: -12px;
135
        left: 0;
136
        z-index: 1;
137
        width: 22px;
138
        height: 22px;
139
        border-radius: $btn-border-radius;
140
      }
141
    }
142
 
143
    [data-event-eventtype*="due"],
144
    .calendar_event_gradingdue {
145
      margin-top: 22px;
146
      position: relative;
147
 
148
      &::after {
149
        content: '';
150
        background-color: $green-200;
151
        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");
152
        background-position: center;
153
        background-repeat: no-repeat;
154
        background-size: 16px;
155
        position: absolute;
156
        top: -12px;
157
        left: 0;
158
        z-index: 1;
159
        width: 22px;
160
        height: 22px;
161
        border-radius: $btn-border-radius;
162
      }
163
    }
164
 
165
    .calendar_event_close {
166
      margin-top: 22px;
167
      background-color: $calendarEventCourseColor;
168
 
169
      position: relative;
170
 
171
      &::after {
172
        content: '';
173
        background-color: $red-200;
174
        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");
175
        background-position: center;
176
        background-repeat: no-repeat;
177
        background-size: 16px;
178
        position: absolute;
179
        top: -12px;
180
        left: 0;
181
        z-index: 1;
182
        width: 22px;
183
        height: 22px;
184
        border-radius: $btn-border-radius;
185
      }
186
    }
187
 
188
    .calendar_event_category {
189
      background-color: $calendarEventCategoryColor;
190
    }
191
 
192
    .calendar_event_gradingdue,
193
    .calendar_event_due,
194
    [data-event-eventtype*="due"],
195
    .calendar-event-box[data-event-component^="mod_"],
196
    .calendar_event_open,
197
    .calendar_event_course {
198
      background-color: $calendarEventCourseColor;
199
    }
200
 
201
    .calendar_event_site {
202
      background-color: $calendarEventGlobalColor;
203
    }
204
 
205
    .calendar_event_group {
206
      background-color: $calendarEventGroupColor;
207
    }
208
 
209
    .calendar_event_user,
210
    .calendar_event_ {
211
      background-color: $calendarEventUserColor;
212
    }
213
 
214
    .description-content {
215
      margin-top: 5px;
216
      font-weight: $font-weight-base;
217
 
218
      img {
219
        width: 100%;
220
        max-width: 100%;
221
      }
222
    }
223
  }
224
}
225
 
226
 
227
.description-content {
228
  padding-right: 30px;
229
  width: 100%;
230
  max-height: 204px;
231
  overflow-y: auto;
232
}
233
 
234
 
235
.calendar_event_ {
236
  .modal-sm & {
237
    background-color: transparent;
238
    padding-left: 50px !important;
239
    border-radius: 0;
240
 
241
    position: relative;
242
 
243
    &:before {
244
      content: '';
245
      position: absolute;
246
      top: 0;
247
      left: 0;
248
 
249
      width: 30px;
250
      height: 30px;
251
      border-radius: $btn-border-radius-lg;
252
 
253
      background-color: var(--primary-color-700);
254
    }
255
 
256
  }
257
 
258
  .badge-special {
259
    background-color: var(--primary-color-700);
260
    color: var(--primary-color-300);
261
  }
262
 
263
}
264
 
265
.calendar_event_other {
266
  .modal-sm & {
267
    background-color: transparent;
268
    padding-left: 50px !important;
269
    border-radius: 0;
270
 
271
    position: relative;
272
 
273
    &:before {
274
      content: '';
275
      position: absolute;
276
      top: 0;
277
      left: 0;
278
 
279
      width: 30px;
280
      height: 30px;
281
      border-radius: $btn-border-radius-lg;
282
 
283
      background-color: $gray-500;
284
 
285
      .theme-dark & {
286
        background-color: $dm-gray-500;
287
      }
288
    }
289
 
290
  }
291
 
292
  .badge-special {
293
    background-color: $gray-500;
294
    color: $gray-900;
295
 
296
    .theme-dark & {
297
      background-color: $dm-gray-500;
298
      color: $dm-gray-900;
299
    }
300
  }
301
 
302
}
303
 
304
.calendar_event_category {
305
  .modal-sm & {
306
    background-color: transparent;
307
    padding-left: 50px !important;
308
    border-radius: 0;
309
 
310
    position: relative;
311
 
312
    &:before {
313
      content: '';
314
      position: absolute;
315
      top: calc(50% - 9px);
316
      left: 20px;
317
 
318
      width: 18px;
319
      height: 18px;
320
      border-radius: 18px;
321
 
322
      background-color: $calendarEventCategoryColor;
323
    }
324
 
325
  }
326
 
327
  .badge-special {
328
    background-color: $calendarEventCategoryColor;
329
    color: lighten($calendarEventCategoryColor, 80%);
330
  }
331
 
332
  .modal-title {
333
    color: darken($calendarEventCategoryColor, 80%);
334
  }
335
}
336
 
337
[data-event-component^="mod_"],
338
.calendar_event_course {
339
  .modal-sm & {
340
    background-color: transparent;
341
    padding-left: 50px !important;
342
    border-radius: 0;
343
 
344
    position: relative;
345
 
346
    &:before {
347
      content: '';
348
      position: absolute;
349
      top: calc(50% - 9px);
350
      left: 20px;
351
 
352
      width: 18px;
353
      height: 18px;
354
      border-radius: 18px;
355
 
356
      background-color: $calendarEventCourseColor;
357
    }
358
 
359
  }
360
 
361
  .badge-special {
362
    background-color: $calendarEventCourseColor;
363
    color: lighten($calendarEventCourseColor, 80%);
364
  }
365
 
366
  .modal-title {
367
    color: $body-color;
368
 
369
    .theme-dark & {
370
      color: $dm-body-color-light;
371
    }
372
  }
373
}
374
 
375
.calendar_event_site {
376
  .modal-sm & {
377
    background-color: transparent;
378
    padding-left: 50px !important;
379
    border-radius: 0;
380
 
381
    position: relative;
382
 
383
    &:before {
384
      content: '';
385
      position: absolute;
386
      top: calc(50% - 9px);
387
      left: 20px;
388
 
389
      width: 18px;
390
      height: 18px;
391
      border-radius: 18px;
392
 
393
      background-color: $calendarEventGlobalColor;
394
    }
395
 
396
  }
397
 
398
  .badge-special {
399
    background-color: $calendarEventGlobalColor;
400
    color: lighten($calendarEventGlobalColor, 80%);
401
  }
402
 
403
  .modal-title {
404
    color: darken($calendarEventGlobalColor, 80%);
405
  }
406
 
407
}
408
 
409
.calendar_event_group {
410
  .modal-sm & {
411
    background-color: transparent;
412
    padding-left: 50px !important;
413
    border-radius: 0;
414
 
415
    position: relative;
416
 
417
    &:before {
418
      content: '';
419
      position: absolute;
420
      top: calc(50% - 9px);
421
      left: 20px;
422
 
423
      width: 18px;
424
      height: 18px;
425
      border-radius: 18px;
426
      background-color: $calendarEventGroupColor;
427
    }
428
 
429
  }
430
 
431
  .badge-special {
432
    background-color: $calendarEventGroupColor;
433
    color: lighten($calendarEventGroupColor, 80%);
434
  }
435
 
436
  .modal-title {
437
    color: darken($calendarEventGroupColor, 80%);
438
  }
439
}
440
 
441
.calendar_event_user,
442
.calendar_event_ {
443
  .modal-sm & {
444
    background-color: transparent;
445
    padding-left: 50px !important;
446
    border-radius: 0;
447
 
448
    position: relative;
449
 
450
    &:before {
451
      content: '';
452
      position: absolute;
453
      top: calc(50% - 9px);
454
      left: 20px;
455
 
456
      width: 18px;
457
      height: 18px;
458
      border-radius: 18px;
459
      background-color: $calendarEventUserColor;
460
    }
461
 
462
  }
463
 
464
  .badge-special {
465
    background-color: $calendarEventUserColor;
466
    color: lighten($calendarEventUserColor, 80%);
467
  }
468
 
469
  .modal-title {
470
    color: darken($calendarEventUserColor, 80%);
471
 
472
    .theme-dark & {
473
      color: lighten($calendarEventUserColor, 80%);
474
    }
475
  }
476
}
477
 
478
 
479
.minicalendar.calendartable {
480
 
481
  [data-event-component^="mod_"],
482
  .calendar_event_category,
483
  .calendar_event_course,
484
  .calendar_event_site,
485
  .calendar_event_group,
486
  .calendar_event_other,
487
  .calendar_event_user,
488
  .calendar_event_ {
489
    position: relative;
490
    background-color: transparent !important;
491
 
492
    &:before {
493
      content: '';
494
      width: 6px;
495
      height: 6px;
496
      border-radius: 6px;
497
 
498
      position: absolute;
499
      top: 1px;
500
      left: calc(50% - 3px);
501
    }
502
  }
503
 
504
  .calendar_event_category {
505
    &:before {
506
      background-color: $calendarEventCategoryColor;
507
    }
508
  }
509
 
510
  [data-event-component^="mod_"],
511
  .calendar_event_course {
512
    &:before {
513
      background-color: $calendarEventCourseColor;
514
    }
515
  }
516
 
517
  .calendar_event_site {
518
    &:before {
519
      background-color: $calendarEventGlobalColor;
520
    }
521
  }
522
 
523
  .calendar_event_group {
524
    &:before {
525
      background-color: $calendarEventGroupColor;
526
    }
527
  }
528
 
529
  .calendar_event_other {
530
    &:before {
531
      background-color: $gray-300;
532
 
533
      .theme-dark & {
534
        background-color: $dm-gray-300;
535
      }
536
    }
537
  }
538
 
539
  .calendar_event_user,
540
  .calendar_event_ {
541
    &:before {
542
      background-color: $calendarEventUserColor;
543
    }
544
  }
545
 
546
}
547
 
548
.calendarmonth {
549
  .calendar-event-box {
550
    position: relative;
551
 
552
    .eventlist & {
553
      background-color: $container-bg;
554
    }
555
 
556
    &.calendar_event_category {
557
      border: 2px solid $calendarEventCategoryColor;
558
 
559
      .badge-special {
560
        background-color: $calendarEventCategoryColor;
561
        color: darken($calendarEventCategoryColor, 80%);
562
      }
563
    }
564
 
565
    &.calendar_event_other {
566
      border: 2px solid $gray-400;
567
 
568
      .theme-dark & {
569
        border: 2px solid $dm-gray-400;
570
      }
571
    }
572
 
573
    &.calendar_event_close {
574
      border: 2px solid $red-600;
575
    }
576
 
577
    &[data-event-component^="mod_"],
578
    &.calendar_event_course {
579
      border: 2px solid $calendarEventCourseColor;
580
    }
581
 
582
    &.calendar_event_site {
583
      border: 2px solid $calendarEventGlobalColor;
584
    }
585
 
586
    &.calendar_event_group {
587
      border: 2px solid $calendarEventGroupColor;
588
    }
589
 
590
    &.calendar_event_user {
591
      border: 2px solid $calendarEventUserColor;
592
 
593
      .badge-special {
594
        background-color: $calendarEventUserColor;
595
        color: darken($calendarEventUserColor, 80%);
596
      }
597
    }
598
  }
599
}
600
 
601
a.day {
602
  color: $body-color;
603
  text-decoration: none;
604
 
605
  .theme-dark & {
606
    color: $dm-body-color;
607
  }
608
 
609
  &:hover {
610
    color: $link-color;
611
    text-decoration: none;
612
 
613
    .theme-dark & {
614
      color: $dm-link-color;
615
    }
616
  }
617
}
618
 
619
td.day.bg-primary {
620
  background-color: $gray-200 !important;
621
  color: $gray-900 !important;
622
 
623
  .theme-dark & {
624
    background-color: $dm-gray-200 !important;
625
    color: $dm-gray-900 !important;
626
  }
627
}
628
 
629
.dayblank {
630
  background-image: url([[pix:theme|diagonal-lines]]);
631
  background-repeat: repeat;
632
  background-color: transparent;
633
  background-size: 4px;
634
 
635
  .theme-dark & {
636
    filter: invert(.9);
637
 
638
  }
639
}
640
 
641
 
642
td.day {
1441 ariadna 643
  [data-bs-toggle=popover] {
1 efrain 644
    font-weight: $font-weight-bold;
645
    color: $body-color;
646
  }
647
}
648
 
649
// Calendar restyling.
650
.calendartable {
651
  width: 100%;
652
  table-layout: fixed;
653
 
654
  th,
655
  td {
656
    width: 14%;
657
    vertical-align: top;
658
    text-align: center;
659
    border: 0;
660
  }
661
}
662
 
663
.calendar-controls {
664
  position: relative;
665
  display: inline-flex;
666
  align-items: center;
667
  justify-content: space-between;
1441 ariadna 668
  gap: 5px;
1 efrain 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
  .next {
695
    position: relative;
696
 
697
    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");
698
    background-repeat: no-repeat;
699
    background-position: center;
700
    background-size: 20px;
701
  }
702
 
703
  .drop-target {
704
    box-sizing: border-box;
705
    border: 1px dashed var(--primary-color-300);
706
  }
1441 ariadna 707
 
708
  .btn-icon {
709
    width: 30px;
710
    min-width: 30px;
711
    height: 30px;
712
    margin: 0!important;
713
  }
1 efrain 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;
1441 ariadna 785
        border-radius: $btn-border-radius-sm;
1 efrain 786
 
787
        #block-region-sidecourseblocks &,
788
        #block-region-side-pre & {
789
          margin: 1px;
1441 ariadna 790
          // padding: 1px;
791
          // width: 7px;
792
          // height: 14px;
1 efrain 793
          display: inline-flex;
1441 ariadna 794
          // text-indent: -999px;
1 efrain 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 {
1441 ariadna 1393
      width: 30px;
1394
      height: 30px;
1395
 
1 efrain 1396
      .arrow {
1397
        color: transparent;
1398
      }
1399
    }
1400
 
1401
    .previous {
1402
      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");
1403
      background-repeat: no-repeat;
1404
      background-position: center;
1405
      left: 0;
1406
 
1407
      .theme-dark & {
1408
        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");
1409
      }
1410
    }
1411
 
1412
    .current {
1413
      display: block;
1414
      text-align: left;
1415
      width: auto;
1416
      margin: 5px 0;
1417
 
1418
      .block.block_calendar_month & {
1419
        font-size: $font-size-sm;
1420
      }
1421
    }
1422
 
1423
    .next {
1424
      right: 0;
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($body-color)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
1426
      background-repeat: no-repeat;
1427
      background-position: center;
1428
 
1429
      .theme-dark & {
1430
        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");
1431
      }
1432
    }
1433
  }
1434
 
1435
  .calendar_filters {
1436
    ul {
1437
      list-style: none;
1438
      margin: 0;
1439
      padding: 0;
1440
    }
1441
 
1442
    li {
1443
      margin-bottom: 0.5rem;
1444
 
1445
      &:last-of-type {
1446
        margin-bottom: 0;
1447
      }
1448
 
1449
      >a {
1450
        &:hover {
1451
          text-decoration: none;
1452
        }
1453
      }
1454
    }
1455
  }
1456
 
1457
  .content {
1458
    h3 {
1459
      &.eventskey {
1460
        margin-top: 0.5em;
1461
      }
1462
    }
1463
  }
1464
}
1465
 
1466
 
1467
.dir-rtl {
1468
  .block .calendar-controls .previous .block .calendar-controls .next {
1469
    transform: rotate(180deg);
1470
  }
1471
}
1472
 
1473
.maincalendar .calendar_event_course a:after {
1474
  display: none;
1475
}
1476
 
1477
.calendar_filters [data-action=filter-event-type] {
1478
 
1479
  [data-event-component^="mod_"],
1480
  .calendar_event_other,
1481
  .calendar_event_category,
1482
  .calendar_event_course,
1483
  .calendar_event_site,
1484
  .calendar_event_group,
1485
  .calendar_event_user {
1486
    display: flex;
1487
    align-items: center;
1488
    justify-content: center;
1489
 
1490
    padding: 2px;
1491
    width: 36px;
1492
    height: 36px;
1493
    border-radius: $btn-border-radius-lg;
1494
    margin-right: 10px;
1495
 
1496
    color: $body-color;
1497
 
1498
    .icon {
1441 ariadna 1499
      font-size: 12px;
1500
      line-height: 20px;
1 efrain 1501
    }
1502
  }
1503
 
1504
  .event-icon {
1505
    .rui-icon-container {
1506
      display: inline-flex;
1507
      align-items: center;
1508
      margin-right: .5rem;
1509
 
1441 ariadna 1510
      img.icon {
1 efrain 1511
        .theme-dark & {
1512
          filter: invert(1);
1513
        }
1514
      }
1515
    }
1516
  }
1517
 
1518
  .eventname,
1519
  .event-icon {
1520
    display: inline-flex;
1521
 
1522
    #nav-drawer & {
1523
      margin: 0 6px;
1524
    }
1525
  }
1526
 
1527
  .eventname {
1528
    width: calc(100% - 80px);
1529
    color: $body-color;
1530
    font-size: $font-size-xs;
1531
    font-weight: $font-weight-medium;
1532
 
1533
    .theme-dark & {
1534
      color: $dm-body-color;
1535
    }
1536
  }
1537
 
1538
}
1539
 
1540
.maincalendar .calendarmonth ul li .event-time {
1541
  display: inline-flex;
1542
  flex-wrap: wrap;
1543
  gap: 3px;
1544
 
1545
  padding: 3px 8px;
1546
  border-radius: $btn-border-radius-sm;
1547
 
1548
  background-color: $container-bg;
1549
  color: $body-color-secondary;
1550
 
1551
  .theme-dark & {
1552
    background-color: $dm-container-bg;
1553
    color: $dm-body-color-secondary;
1554
  }
1555
 
1556
  a.dimmed:link {
1557
    color: inherit!important;
1558
    line-height: 1.1;
1559
 
1560
    &:hover {
1561
      color: $link-hover-color!important;
1562
    }
1563
  }
1564
}
1565
 
1566
.maincalendar .calendarmonth ul li .event-time,
1567
.maincalendar .calendarmonth ul li .event-time span {
1568
  font-size: $font-size-xs;
1569
  font-weight: $font-weight-medium;
1570
  color: inherit;
1571
}
1572
 
1573
.event-title {
1574
  font-size: $font-size-sm;
1575
  font-weight: $font-weight-medium;
1576
  line-height: 1.3;
1577
  margin-top: 5px;
1578
  margin-bottom: 5px;
1579
}
1580
 
1581
/* Display month name above the calendar */
1582
table.calendartable caption {
1583
  caption-side: top;
1584
}
1585
 
1586
@media (min-width: 768px) {
1587
  #page-calender-view {
1588
    .container-fluid {
1589
      min-width: 1024px;
1590
    }
1591
  }
1592
}
1593
 
1594
.calendarwrapper {
1595
  position: relative;
1596
 
1597
  label {
1598
    margin: 0 !important;
1599
  }
1600
}
1601
 
1602
.day-popover-content {
1603
  &:empty+.day-popover-alternate {
1604
    display: block;
1605
  }
1606
}
1607
 
1608
.summary-modal-container {
1609
  .description-content {
1610
    >p {
1611
      margin: 0;
1612
    }
1613
  }
1614
}
1615
 
1616
 
1617
/* Custom YUI CSS for the theme */
1618
.yui3-skin-sam {
1619
  .yui3-calendar-header {
1620
    display: block;
1621
    width: 300px;
1622
 
1623
    padding-bottom: 1rem;
1624
    margin-bottom: 1rem;
1625
    margin-left: -1.5rem;
1626
    margin-right: -1.5rem;
1627
 
1628
    border-bottom: 1px solid $border-color;
1629
 
1630
    .theme-dark & {
1631
      border-bottom: 1px solid $dm-border-color;
1632
    }
1633
  }
1634
 
1635
 
1636
  .dateselector-calendar-panel {
1637
    top: 30px;
1638
  }
1639
 
1640
  .yui3-calendar-day,
1641
  .yui3-calendar-prevmonth-day,
1642
  .yui3-calendar-nextmonth-day {
1643
    background: transparent;
1644
    border: none;
1645
    font-size: $font-size-md;
1646
  }
1647
 
1648
  .yui3-calendar-day {
1649
    width: 35px;
1650
    height: 35px;
1651
    font-weight: $font-weight-medium;
1652
    font-size: $font-size-md;
1653
 
1654
    &:hover {
1655
      border-radius: $btn-border-radius-lg;
1656
      color: var(--main-theme-color);
1657
      background: var(--primary-color-100);
1658
    }
1659
  }
1660
 
1661
  .yui3-calendar-day-selected {
1662
    color: $red-100;
1663
    background: $red-600;
1664
 
1665
    font-weight: $font-weight-bold;
1666
    border-radius: $btn-border-radius-lg;
1667
  }
1668
 
1669
  .yui3-calendar-header-label {
1670
    font-size: $font-size-md;
1671
  }
1672
 
1673
  .yui3-calendar-content {
1674
    padding: 1.5rem;
1675
    background: $container-bg;
1676
    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%);
1677
 
1678
    border: 0;
1679
    color: $body-color;
1680
    border-radius: $btn-border-radius;
1681
  }
1682
 
1683
  .yui3-calendarnav-prevmonth {
1684
    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");
1685
    background-repeat: no-repeat;
1686
    background-position: center;
1687
    border: none;
1688
    width: 40px;
1689
    height: 40px;
1690
 
1691
    top: -10px;
1692
 
1693
    margin-left: 10px;
1694
  }
1695
 
1696
  .yui3-calendarnav-nextmonth {
1697
    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");
1698
    background-repeat: no-repeat;
1699
    background-position: center;
1700
    border: none;
1701
    width: 40px;
1702
    height: 40px;
1703
 
1704
    top: -10px;
1705
    margin-right: 10px;
1706
  }
1707
 
1708
  .yui3-button.closebutton {
1709
    @extend .close;
1710
 
1711
    background-image: none;
1712
    box-shadow: none;
1713
 
1714
    [aria-hidden="true"] {
1715
      display: none;
1716
    }
1717
  }
1718
 
1719
}
1720
 
1721
/* blocks */
1722
.block_calendar_upcoming {
1723
  .event {
1724
    .activityiconcontainer {
1725
      display: inline-flex;
1726
      justify-content: center;
1727
      align-items: center;
1728
    }
1729
  }
1730
 
1731
  [data-type="event"] {
1732
    font-size: $font-size-sm;
1733
    font-weight: $font-weight-medium;
1734
    line-height: 1.4;
1735
    color: $body-color;
1736
 
1737
    margin-top: 0;
1738
 
1739
    .theme-dark & {
1740
      color: $dm-body-color;
1741
    }
1742
 
1743
    &:hover {
1744
      color: $link-color;
1745
 
1746
      .theme-dark & {
1747
        color: $dm-link-color;
1748
      }
1749
    }
1750
  }
1751
 
1752
  .date {
1753
    color: $gray-700;
1754
    font-size: $font-size-xs;
1755
    padding: 0;
1756
 
1757
    .theme-dark & {
1758
      color: $dm-gray-700;
1759
    }
1760
 
1761
    span {
1762
      width: 100%;
1763
      background-color: transparent;
1764
    }
1765
 
1766
    a {
1767
      color: $gray-700;
1768
 
1769
      .theme-dark & {
1770
        color: $dm-gray-700;
1771
      }
1772
    }
1773
  }
1774
 
1775
}
1776
 
1777
.maincalendar {
1778
  .event {
1779
    background-color: $gray-100;
1780
    padding: 2 * $spacer;
1781
    margin-bottom: 2 * $spacer;
1782
 
1783
    border-radius: $btn-border-radius;
1784
 
1785
    .theme-dark & {
1786
      background-color: $dm-gray-100;
1787
    }
1788
  }
1789
}
1790
 
1791
/* day view */
1792
.calendar-event-box {
1793
  padding: 20px;
1794
  position: relative;
1795
 
1796
  border: 1px solid $border-color;
1797
  border-radius: $btn-border-radius;
1798
 
1799
  .theme-dark & {
1800
    border: 1px solid $dm-border-color;
1801
  }
1802
 
1803
  .calendar-event-settings {
1804
    position: absolute;
1805
 
1806
    @include media-breakpoint-up(md) {
1807
      top: 20px;
1808
      left: auto;
1809
      right: 20px;
1810
    }
1811
 
1812
    @include media-breakpoint-between(xs,sm) {
1813
      top: 10px;
1814
      left: auto;
1815
      right: 10px;
1816
    }
1817
  }
1818
 
1819
  &:last-child {
1820
    margin-bottom: 0;
1821
  }
1822
 
1823
  .calendar-event-date {
1824
 
1825
    font-weight: $font-weight-bold;
1826
    color: $body-color-secondary;
1827
 
1828
    display: inline-flex;
1829
    align-items: center;
1830
 
1831
    position: relative;
1832
 
1833
    @include media-breakpoint-up(md) {
1834
      margin-bottom: 1rem;
1835
      font-size: $font-size-xs;
1836
    }
1837
 
1838
    @include media-breakpoint-between(xs, sm) {
1839
      margin-bottom: 5px;
1840
      font-size: 11px;
1841
    }
1842
 
1843
    .theme-dark & {
1844
      color: $dm-body-color-secondary;
1845
    }
1846
 
1847
    a {
1848
      display: inline-block;
1849
      padding: .35rem .5rem;
1850
      margin: 0 0.5rem 0 0;
1851
      line-height: 1.2;
1852
      color: $gray-900;
1853
      text-align: center;
1854
      vertical-align: baseline;
1855
      @include border-radius();
1856
 
1857
      background-color: $gray-100;
1858
 
1859
      transition: $transition-base;
1860
 
1861
      .theme-dark & {
1862
        color: $dm-gray-900;
1863
        background-color: $dm-gray-100;
1864
      }
1865
 
1866
      &:hover {
1867
        color: $gray-800;
1868
        background-color: $gray-200;
1869
 
1870
        .theme-dark & {
1871
          background-color: $dm-gray-200;
1872
          color: $dm-gray-800;
1873
        }
1874
      }
1875
    }
1876
 
1877
    a,
1878
    strong {
1879
      font-weight: $font-weight-medium;
1880
      color: $body-color !important;
1881
 
1882
      .theme-dark & {
1883
        color: $dm-body-color !important;
1884
      }
1885
    }
1886
 
1887
    .dimmed_text {
1888
      color: $body-color !important;
1889
 
1890
      .theme-dark & {
1891
        color: $dm-body-color !important;
1892
      }
1893
 
1894
      strong {
1895
        font-weight: $font-weight-medium;
1896
      }
1897
 
1898
      a.dimmed {
1899
        font-weight: $font-weight-medium;
1900
        color: $body-color !important;
1901
 
1902
        .theme-dark & {
1903
          color: $dm-body-color !important;
1904
        }
1905
      }
1906
    }
1907
  }
1908
 
1909
  .calendar-event-icon {
1910
    margin-top: 1rem;
1911
 
1912
    display: flex;
1913
    justify-content: center;
1914
    align-content: center;
1915
    border-radius: $btn-border-radius-xl;
1916
  }
1917
 
1918
  .calendar-event-heading {
1919
    font-family: $font-family-base;
1920
    font-weight: $font-weight-bold;
1921
    vertical-align: middle;
1922
    margin: 1rem 0 .5rem;
1923
 
1924
    @include media-breakpoint-up(md) {
1925
      font-size: 1.5rem;
1926
    }
1927
 
1928
    @include media-breakpoint-between(xs, sm) {
1929
      font-size: $font-size-sm;
1930
    }
1931
 
1932
    .block.block_calendar_month & {
1933
      margin-top: 0;
1934
      font-size: $font-size-md;
1935
    }
1936
  }
1937
 
1938
}
1939
 
1940
.calendar-event-icon {
1941
  .calendar-event-row & {
1942
    width: 50px;
1943
    height: 50px;
1944
 
1945
    background-color: var(--primary-color-100);
1946
    color: var(--primary-color-800);
1947
    border-radius: $btn-border-radius;
1948
 
1949
    align-items: center;
1950
    justify-content: center;
1951
  }
1952
}
1953
 
1954
.calendar-event-content {
1955
 
1956
  .block.block_calendar_month & {
1957
    padding: 0;
1958
  }
1959
 
1960
  .calendar-event-icon {
1961
    .icon {
1962
      font-size: 1rem;
1963
    }
1964
  }
1965
}
1966
 
1967
.rui-calendar-footer {
1968
  margin-top: 10px;
1969
}
1970
 
1971
.rui-calendar-list {
1972
  margin: 0;
1973
  overflow: hidden;
1974
 
1975
  li {
1976
    width: 100%;
1977
    display: inline-flex;
1978
    align-items: center;
1979
    justify-content: flex-start;
1980
 
1981
    list-style: none;
1982
    font-size: $font-size-xs;
1983
    color: $body-color-secondary;
1984
 
1985
    .theme-dark & {
1986
      color: $dm-body-color-secondary;
1987
    }
1988
 
1989
    .rui-calendar-list-content {
1990
      padding: 5px 0;
1991
 
1992
      .block.block_calendar_month & {
1993
        padding: 8px;
1994
        font-size: $font-size-xs;
1995
      }
1996
 
1997
      &:last-of-type {
1998
        border-bottom: none;
1999
      }
2000
    }
2001
 
2002
    a {
2003
      font-weight: $font-weight-medium;
2004
 
2005
      &:hover {
2006
        color: var(--main-theme-color);
2007
        text-decoration: none;
2008
 
2009
        .theme-dark & {
2010
          color: var(--primary-color-200);
2011
        }
2012
      }
2013
    }
2014
 
2015
    .icon {
2016
      color: $body-color-light;
2017
 
2018
      .theme-dark & {
2019
        color: $dm-body-color-light;
2020
      }
2021
    }
2022
  }
2023
}
2024
 
2025
.rui-calendar-list--inline {
2026
  li {
2027
    display: inline-flex;
2028
    align-items: center;
2029
  }
2030
}
2031
 
2032
/* modal */
2033
.modal-cal-desc {
2034
  width: 100%;
2035
}
2036
 
2037
.modal-cal-time {
2038
  font-size: $font-size-xs;
2039
 
2040
  a {
2041
    position: relative;
2042
    display: inline-block;
2043
    padding: 0.35rem 0.85rem;
2044
    margin: 0 .5rem .25rem 0;
2045
    font-size: $font-size-xs;
2046
    color: $gray-900 !important;
2047
    text-align: center;
1441 ariadna 2048
    text-decoration: none;
1 efrain 2049
    vertical-align: baseline;
2050
    @include border-radius();
2051
 
2052
    background-color: $gray-100;
2053
 
2054
    transition: $transition-base;
2055
 
2056
    .theme-dark & {
2057
      color: $dm-gray-900 !important;
2058
      background-color: $dm-gray-100;
2059
    }
2060
 
2061
    &:hover {
2062
      background-color: $gray-200;
2063
      text-decoration: none;
2064
 
2065
      .theme-dark & {
2066
        background-color: $dm-gray-200;
2067
      }
2068
    }
2069
  }
2070
}
2071
 
2072
/* mobile */
2073
@include media-breakpoint-only(sm) {
2074
  .calendarwrapper {
2075
 
2076
    .custom-select {
2077
      width: 100%;
2078
      margin: 0;
2079
    }
2080
 
2081
  }
2082
}
2083
 
2084
/* other */
2085
[data-groupname=timedurationuntil] {
2086
  margin-bottom: 0.25rem !important;
2087
}
2088
 
2089
#page-calendar-view {
2090
  .calendar-event-box .calendar-event-icon {
2091
    img {
2092
      width: auto;
2093
      height: auto;
2094
    }
2095
  }
2096
}
2097
 
2098
.yui3-skin-sam .yui3-calendar-weekday {
2099
  font-size: $font-size-xs;
2100
  font-weight: normal;
2101
  color: $body-color-light;
2102
 
2103
  text-align: center;
2104
 
2105
  .theme-dark & {
2106
    color: $dm-body-color-light;
2107
  }
2108
}
2109
 
1441 ariadna 2110
.rui-cal-header {
2111
  margin-bottom: 20px;
2112
  gap: 5px;
2113
  align-items: center;
2114
 
2115
  .select {
2116
    margin-left: 0!important;
2117
  }
2118
 
2119
  select, .btn {
2120
    margin-bottom: 0;
2121
  }
2122
}
2123
 
1 efrain 2124
@include media-breakpoint-between(xs, sm) {
2125
 
2126
  .rui-cal-header,
2127
  .bottom {
2128
 
2129
    div,
2130
    .btn,
2131
    select {
2132
      width: 100%;
2133
      margin: 0 !important;
2134
    }
2135
 
2136
    .btn,
2137
    select {
2138
      margin: 0 0 .5rem 0 !important;
2139
 
2140
      &:last-of-type {
2141
        margin-bottom: 0;
2142
      }
2143
    }
2144
  }
2145
}
2146
 
2147
.tmpl-course-blocks,
2148
#block-region-dleftblocks,
2149
#block-region-drightblocks,
2150
#block-region-sidecourseblocks,
2151
#block-region-sidebartb,
2152
#block-region-sidebarbb,
2153
#block-region-side-pre {
2154
  .rui-cal-header {
2155
    gap: 10px;
2156
 
2157
    .custom-select,
2158
    .btn {
2159
      width: 100%;
2160
      max-width: 100%;
1441 ariadna 2161
      margin: 0 !important;
1 efrain 2162
    }
2163
  }
2164
}
2165
 
2166
 
2167
/* Display month name above the calendar */
2168
table.calendartable caption {
2169
  caption-side: top;
2170
}
2171
 
2172
@mixin day-number-has-event {
2173
  .day-number {
2174
    display: inline-block;
2175
    position: relative;
2176
 
2177
    &:before {
2178
      content: '.';
2179
      display: inline-block;
2180
      position: absolute;
2181
      bottom: 0.4em;
2182
      left: 0;
2183
      text-align: center;
2184
      width: 100%;
2185
      font-size: 3em;
2186
      color: inherit;
2187
    }
2188
  }
2189
}
2190
 
2191
@media (min-width: 768px) {
2192
  #page-calender-view {
2193
    .container-fluid {
2194
      min-width: 1024px;
2195
    }
2196
  }
2197
}
2198
 
2199
@media (min-width: 768px) {
2200
 
2201
  #sidepre-blocks,
2202
  #block-region-sidebartb,
2203
  #block-region-sidebarbb,
2204
  #blocks-dashboardrightblock,
2205
  #blocks-dashboardleftblock,
2206
  #theme_universe-drawers-blocks,
2207
  section:not(#region-main) {
2208
    .block {
2209
      &.block_calendar_month {
2210
        .maincalendar {
2211
          .calendartable {
2212
            &.calendarmonth {
2213
 
2214
              th,
2215
              td {
2216
                border: none;
2217
                text-align: center !important; // stylelint-disable-line declaration-no-important
2218
                padding: 0;
2219
              }
2220
 
2221
              td {
2222
                height: auto !important;
2223
                font-size: 0.8em;
2224
 
2225
                &.hasevent {
2226
                  [data-region="day-content"] {
2227
                    display: none;
2228
                  }
2229
 
2230
                  @include day-number-has-event;
2231
                }
2232
 
2233
                &:after {
2234
                  content: '';
2235
                  display: block;
2236
                  margin-top: calc(100% - 26px);
2237
                }
2238
 
2239
                &.clickable:hover {
2240
                  background-color: inherit;
2241
                }
2242
 
2243
                &.clickable:not(.today):hover {
2244
                  .day-number-circle {
2245
                    border-radius: $btn-border-radius-xl;
2246
                    background-color: var(--primary-color-100);
2247
 
2248
                    .theme-dark & {
2249
                      background-color: $dm-gray-300;
2250
                    }
2251
                  }
2252
                }
2253
              }
2254
            }
2255
          }
2256
        }
2257
 
2258
        .bottom {
2259
          // This adds a border on the top side of the footer container.
2260
          // So we won't have to add a <hr> element in the footer_options template.
2261
          border-top: $border-width solid $card-border-color;
2262
          padding-top: map-get($spacers, 2);
2263
 
2264
          .theme-dark & {
2265
            border-color: $dm-border-color;
2266
          }
2267
        }
2268
      }
2269
    }
2270
  }
2271
}
2272
 
2273
@media (max-width: 768px) {
2274
  .maincalendar {
2275
    .calendartable {
2276
      &.calendarmonth {
2277
 
2278
        th,
2279
        td {
2280
          border: none;
2281
          text-align: center !important; // stylelint-disable-line declaration-no-important
2282
          padding: 0;
2283
        }
2284
 
2285
        td {
2286
          height: auto;
2287
          font-size: inherit;
2288
          padding: 0;
2289
 
2290
          &.hasevent {
2291
            [data-region="day-content"] {
2292
              display: none;
2293
            }
2294
 
2295
            @include day-number-has-event;
2296
          }
2297
 
2298
          &:after {
2299
            content: '';
2300
            display: block;
2301
            margin-top: calc(100% - 26px);
2302
          }
2303
 
2304
          &>div {
2305
            height: auto !important; // stylelint-disable-line declaration-no-important
2306
          }
2307
        }
2308
      }
2309
    }
2310
  }
2311
}
2312
 
2313
 
2314
@include media-breakpoint-between(xs, md) {
2315
  .maincalendar .calendartable.calendarmonth th {
2316
    font-size: 11px;
2317
  }
2318
}
2319
 
2320
.calendarwrapper {
2321
  position: relative;
2322
}
2323
 
2324
.day-popover-content {
2325
  &:empty+.day-popover-alternate {
2326
    display: block;
2327
  }
2328
}
2329
 
2330
.location-content {
2331
  overflow-wrap: break-word;
2332
}
2333
 
2334
.description-content {
2335
  overflow-wrap: break-word;
1441 ariadna 2336
  font-size: $font-size-sm;
1 efrain 2337
 
2338
  >p {
2339
    margin: 0;
2340
  }
2341
}
2342
 
2343
.maincalendar .calendar_event_user a:after {
2344
  display: none;
2345
}
2346
 
2347
// Minicalendar event key
2348
.minicalendar-event-type {
2349
  display: flex;
2350
  justify-content: center;
2351
  align-items: stretch;
2352
  flex-wrap: wrap;
2353
  gap: 10px;
2354
 
2355
  #nav-drawer &,
2356
  #blocks-dashboardrightblock &,
2357
  #blocks-dashboardleftblock &,
2358
  #theme_universe-drawers-blocks & {
2359
    display: none;
2360
  }
2361
 
1441 ariadna 2362
  .drawer & {
2363
    gap: 3px;
2364
    justify-content: flex-start;
2365
  }
2366
 
1 efrain 2367
  li {
2368
    font-size: $font-size-xs;
2369
    color: #212121;
2370
    padding: 3px 7px !important;
2371
    margin: 0 !important;
2372
  }
2373
 
2374
  span:first-letter {
2375
    text-transform: uppercase
2376
  }
2377
}
2378
 
1441 ariadna 2379
.block_calendar_month {
2380
  .footer a {
2381
    width: 100%;
2382
  }
2383
 
2384
  .footer .bottom {
2385
    justify-content: center;
2386
    align-items: stretch;
2387
    grid-template-columns: repeat(auto-fill, minmax(49%, 1fr));
2388
    display: grid;
2389
    gap: 10px;
2390
  }
1 efrain 2391
}
2392
 
1441 ariadna 2393
 
1 efrain 2394
#sidepre-blocks,
2395
#block-region-sidebartb,
2396
#block-region-sidebarbb,
2397
#blocks-dashboardrightblock,
2398
#blocks-dashboardleftblock,
2399
#theme_universe-drawers-blocks {
2400
  .maincalendar .calendartable.calendarmonth th {
2401
    font-size: 11px;
2402
    font-weight: $font-weight-medium;
2403
  }
2404
 
2405
  .block .calendar-controls .current {
2406
    font-size: $font-size-md;
2407
  }
2408
 
2409
  .minicalendar-event-type {
2410
    justify-content: flex-start;
2411
    gap: 4px;
2412
  }
2413
 
2414
  .block_calendar_month {
2415
    .card-body .footer a {
2416
      margin: 2px 0;
2417
    }
2418
  }
2419
}