MDL-69394 calendar: Fix event colour indicator contrast
[moodle.git] / theme / boost / scss / moodle / calendar.scss
CommitLineData
536f0460
DW
1/* calendar.less */
2
3// Calendar colour variables defined.
3c7a4833 4$calendarEventCategoryColor: #e0cbe0 !default; // Pale purple.
7ee4a287
DW
5$calendarEventCourseColor: #ffd3bd !default; // Pale red.
6$calendarEventGlobalColor: #d6f8cd !default; // Pale green.
7$calendarEventGroupColor: #fee7ae !default; // Pale yellow.
8$calendarEventUserColor: #dce7ec !default; // Pale blue.
d268c5ba 9$calendarEventOtherColor: #ced4da !default; // Pale gray.
536f0460 10
3c7a4833
JP
11// Border colours for the event colour indicators.
12$calendarEventCategoryBorder: 2px solid #9e619f !default; // Purple.
13$calendarEventCourseBorder: 2px solid #d34600 !default; // Red-orange.
14$calendarEventGlobalBorder: 2px solid #2b8713 !default; // Green.
15$calendarEventGroupBorder: 2px solid #9a6e02 !default; // Dark orange.
16$calendarEventUserBorder: 2px solid #4e7c91 !default; // Blue.
17$calendarEventOtherBorder: 2px solid #687889 !default; // Gray.
18
19// This will be the colour of mini-calendar links, hide/show filter icons, edit/delete icon buttons.
20$calendarEventColor: #0d5ca1 !default;
21
536f0460 22// Calendar event background colours defined.
d0e56d84
AN
23.calendar_event_category {
24 background-color: $calendarEventCategoryColor;
3c7a4833
JP
25 .commands a {
26 color: $calendarEventColor;
27 }
d0e56d84 28}
536f0460
DW
29.calendar_event_course {
30 background-color: $calendarEventCourseColor;
3c7a4833
JP
31 .commands a {
32 color: $calendarEventColor;
33 }
536f0460 34}
f4143537 35
64ff737a 36.calendar_event_site {
536f0460 37 background-color: $calendarEventGlobalColor;
3c7a4833
JP
38 .commands a {
39 color: $calendarEventColor;
40 }
536f0460 41}
f4143537 42
536f0460
DW
43.calendar_event_group {
44 background-color: $calendarEventGroupColor;
3c7a4833
JP
45 .commands a {
46 color: $calendarEventColor;
47 }
536f0460 48}
f4143537 49
536f0460
DW
50.calendar_event_user {
51 background-color: $calendarEventUserColor;
3c7a4833
JP
52 .commands a {
53 color: $calendarEventColor;
54 }
536f0460
DW
55}
56
d268c5ba
MG
57.calendar_event_other {
58 background-color: $calendarEventOtherColor;
3c7a4833
JP
59 .commands a {
60 color: $calendarEventColor;
61 }
d268c5ba
MG
62}
63
536f0460
DW
64// Calendar restyling.
65.path-calendar {
66 .calendartable {
67 width: 100%;
3ec69c2e 68 table-layout: fixed;
f4143537
DP
69
70 th,
71 td {
536f0460
DW
72 width: 14%;
73 vertical-align: top;
74 text-align: center;
75 border: 0;
76 }
77 }
f4143537 78
536f0460
DW
79 .calendar-controls {
80 .previous,
81 .next,
82 .current {
83 display: block;
84 float: left;
85 width: 12%;
86 }
f4143537 87
536f0460
DW
88 .previous {
89 text-align: left;
aefb2950 90 border: 1px solid transparent;
536f0460 91 }
f4143537 92
536f0460
DW
93 .current {
94 text-align: center;
95 width: 76%;
96 }
f4143537 97
536f0460
DW
98 .next {
99 text-align: right;
aefb2950
RW
100 border: 1px solid transparent;
101 }
102
103 .drop-target {
104 box-sizing: border-box;
105 border: 1px dashed $brand-primary;
536f0460
DW
106 }
107 }
f4143537 108
536f0460
DW
109 .filters {
110 table {
111 border-collapse: separate;
112 border-spacing: 2px;
113 width: 100%;
114 }
115 }
f4143537 116
536f0460
DW
117 .maincalendar {
118 vertical-align: top;
119 padding: 0;
f4143537 120
536f0460
DW
121 .bottom {
122 text-align: center;
123 padding: 5px 0 0 0;
124 }
f4143537 125
536f0460
DW
126 .heightcontainer {
127 height: 100%;
128 position: relative;
129 }
f4143537 130
536f0460
DW
131 .calendarmonth {
132 width: 98%;
133 margin: 10px auto;
f4143537 134
536f0460
DW
135 ul {
136 margin: 0;
a7ed05e7 137 padding: 0;
f4143537 138
536f0460
DW
139 li {
140 list-style-type: none;
a7ed05e7
AN
141
142 > a {
143 @include text-truncate;
144 max-width: 100%;
145 display: inline-block;
a1b696f9
AN
146
147 &:hover {
148 text-decoration: $link-decoration;
149
150 .eventname {
151 text-decoration: $link-hover-decoration;
152 }
153 }
a7ed05e7
AN
154 }
155
156 .icon {
157 margin-left: 0.25em;
158 margin-right: 0.25em;
159 vertical-align: initial;
160 }
161
162 .badge {
163 &.badge-circle {
164 width: 12px;
165 height: 12px;
166 border-radius: 6px;
167 vertical-align: middle;
168
169 &.calendar_event_category {
170 background-color: $calendarEventCategoryColor;
3c7a4833 171 border: $calendarEventCategoryBorder;
a7ed05e7
AN
172 }
173 &.calendar_event_course {
174 background-color: $calendarEventCourseColor;
3c7a4833 175 border: $calendarEventCourseBorder;
a7ed05e7
AN
176 }
177
178 &.calendar_event_site {
179 background-color: $calendarEventGlobalColor;
3c7a4833 180 border: $calendarEventGlobalBorder;
a7ed05e7
AN
181 }
182
183 &.calendar_event_group {
184 background-color: $calendarEventGroupColor;
3c7a4833 185 border: $calendarEventGroupBorder;
a7ed05e7
AN
186 }
187
188 &.calendar_event_user {
189 background-color: $calendarEventUserColor;
3c7a4833 190 border: $calendarEventUserBorder;
a7ed05e7 191 }
d268c5ba
MG
192
193 &.calendar_event_other {
194 background-color: $calendarEventOtherColor;
3c7a4833 195 border: $calendarEventOtherBorder;
d268c5ba 196 }
a7ed05e7
AN
197 }
198 }
536f0460
DW
199 }
200 }
f4143537 201
536f0460
DW
202 td {
203 height: 5em;
204 }
f6e8cc83
RW
205
206 .clickable:hover {
207 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
208 }
536f0460 209 }
f4143537 210
536f0460
DW
211 .calendar-controls {
212 .previous,
213 .next {
214 width: 30%;
215 }
f4143537 216
536f0460
DW
217 .current {
218 width: 39.95%;
219 }
220 }
f4143537 221
536f0460
DW
222 .controls {
223 width: 98%;
224 margin: 10px auto;
225 }
f4143537 226
d0e56d84 227 .calendar_event_category,
536f0460 228 .calendar_event_course,
64ff737a 229 .calendar_event_site,
536f0460
DW
230 .calendar_event_group,
231 .calendar_event_user {
f6e8cc83
RW
232 &:hover {
233 a {
234 color: $link-hover-color;
235 text-decoration: $link-hover-decoration;
236 }
237 }
536f0460 238 }
f4143537 239
d0e56d84
AN
240 .calendar_event_category {
241 border-color: $calendarEventCategoryColor;
242 }
a7ed05e7 243
536f0460
DW
244 .calendar_event_course {
245 border-color: $calendarEventCourseColor;
246 }
f4143537 247
64ff737a 248 .calendar_event_site {
536f0460
DW
249 border-color: $calendarEventGlobalColor;
250 }
f4143537 251
536f0460
DW
252 .calendar_event_group {
253 border-color: $calendarEventGroupColor;
254 }
f4143537 255
536f0460
DW
256 .calendar_event_user {
257 border-color: $calendarEventUserColor;
258 }
f4143537 259
d268c5ba
MG
260 .calendar_event_other {
261 border-color: $calendarEventOtherColor;
262 }
263
536f0460 264 .calendartable {
f4143537
DP
265 td,
266 li {
a7ed05e7 267 padding: 0 4px 4px 4px;
536f0460 268 }
f4143537 269
536f0460 270 li {
536f0460
DW
271 text-align: left;
272 }
273 }
f4143537 274
536f0460
DW
275 .header {
276 overflow: hidden;
f4143537 277
536f0460
DW
278 .buttons {
279 float: right;
280 }
281 }
f4143537 282
ef4e04ee
MH
283 .event {
284 .card-header img {
285 vertical-align: baseline;
286 }
287
288 .location {
289 word-break: break-all;
290 overflow-wrap: break-word;
291 }
536f0460 292 }
7ee4a287 293
536f0460
DW
294 }
295}
296
297// Calendar export.
298#page-calendar-export {
299 .indent {
300 padding-left: 20px;
301 }
302}
303
304// Block minicalendar.
305.block {
306 .minicalendar {
307 max-width: 280px;
308 margin: 0 auto;
309 width: 100%;
f4143537
DP
310
311 th,
312 td {
536f0460
DW
313 padding: 2px;
314 font-size: 0.8em;
315 text-align: center;
316 }
f4143537 317
536f0460
DW
318 td {
319 &.weekend {
6239d808 320 color: $text-muted;
536f0460 321 }
f4143537 322
536f0460
DW
323 a {
324 width: 100%;
325 height: 100%;
326 display: block;
3c7a4833 327 color: $calendarEventColor;
536f0460 328 }
f4143537 329
536f0460
DW
330 &.duration_global {
331 border-top: 1px solid $calendarEventGlobalColor;
332 border-bottom: 1px solid $calendarEventGlobalColor;
f4143537 333
536f0460
DW
334 &.duration_finish {
335 background-color: $calendarEventGlobalColor;
336 }
337 }
f4143537 338
d0e56d84
AN
339 &.duration_category {
340 border-top: 1px solid $calendarEventCategoryColor;
341 border-bottom: 1px solid $calendarEventCategoryColor;
342
343 &.duration_finish {
344 background-color: $calendarEventCategoryColor;
345 }
346 }
347
536f0460
DW
348 &.duration_course {
349 border-top: 1px solid $calendarEventCourseColor;
350 border-bottom: 1px solid $calendarEventCourseColor;
f4143537 351
536f0460
DW
352 &.duration_finish {
353 background-color: $calendarEventCourseColor;
354 }
355 }
f4143537 356
536f0460
DW
357 &.duration_group {
358 border-top: 1px solid $calendarEventGroupColor;
359 border-bottom: 1px solid $calendarEventGroupColor;
f4143537 360
536f0460
DW
361 &.duration_finish {
362 background-color: $calendarEventGroupColor;
363 }
364 }
f4143537 365
536f0460
DW
366 &.duration_user {
367 border-top: 1px solid $calendarEventUserColor;
368 border-bottom: 1px solid $calendarEventUserColor;
f4143537 369
536f0460
DW
370 &.duration_finish {
371 background-color: $calendarEventUserColor;
372 }
373 }
d268c5ba
MG
374
375 &.duration_other {
376 border-top: 1px solid $calendarEventOtherColor;
377 border-bottom: 1px solid $calendarEventOtherColor;
378
379 &.duration_finish {
380 background-color: $calendarEventOtherColor;
381 }
382 }
536f0460 383 }
f4143537 384
536f0460
DW
385 caption {
386 font-size: inherit;
387 font-weight: inherit;
388 line-height: inherit;
389 text-align: center;
390 }
391 }
f4143537 392
536f0460
DW
393 .calendar-controls {
394 .previous,
395 .current,
396 .next {
397 display: block;
398 float: left;
399 }
f4143537 400
536f0460
DW
401 .previous {
402 text-align: left;
403 width: 12%;
404 }
f4143537 405
536f0460
DW
406 .current {
407 text-align: center;
408 width: 76%;
409 }
f4143537 410
536f0460
DW
411 .next {
412 text-align: right;
413 width: 12%;
414 }
415 }
f4143537 416
536f0460
DW
417 .calendar_filters {
418 ul {
419 list-style: none;
420 margin: 0;
13623ce8 421 padding: 0;
536f0460 422 }
f4143537 423
536f0460
DW
424 li {
425 margin-bottom: 0.2em;
f4143537 426
536f0460 427 span {
3c7a4833
JP
428 &.calendar_event_category {
429 i {
430 color: $calendarEventColor;
431 }
432 }
433 &.calendar_event_course {
434 i {
435 color: $calendarEventColor;
436 }
437 }
438 &.calendar_event_site {
439 i {
440 color: $calendarEventColor;
441 }
442 }
443 &.calendar_event_group {
444 i {
445 color: $calendarEventColor;
446 }
447 }
448 &.calendar_event_user {
449 i {
450 color: $calendarEventColor;
451 }
452 }
453 &.calendar_event_other {
454 i {
455 color: $calendarEventColor;
456 }
457 }
536f0460
DW
458 img {
459 padding: 0 0.2em;
13623ce8 460 margin: 0;
536f0460
DW
461 }
462 }
a7ed05e7
AN
463 .icon {
464 vertical-align: initial;
5726577f 465 margin: 0 0.1rem 0 0.4rem;
a7ed05e7 466 }
a1b696f9
AN
467
468 > a {
469 &:hover {
470 text-decoration: $link-decoration;
471
472 .eventname {
473 text-decoration: $link-hover-decoration;
474 }
475 }
476 }
536f0460
DW
477 }
478 }
f4143537 479
536f0460
DW
480 .content {
481 h3 {
482 &.eventskey {
483 margin-top: 0.5em;
484 }
485 }
486 }
487}
488
4125ce04
MG
489/* Display month name above the calendar */
490table.calendartable caption {
491 caption-side: top;
492}
493
536f0460
DW
494@media (min-width: 768px) {
495 #page-calender-view {
496 .container-fluid {
497 min-width: 1024px;
498 }
499 }
500}
c8b6e9ab
AN
501
502.calendarwrapper {
503 position: relative;
504}
505
506.day-popover-content {
507 &:empty + .day-popover-alternate {
508 display: block;
509 }
510}
f0fc8a19 511
a67bbe50
SL
512.location-content {
513 overflow-wrap: break-word;
514}
ef4e04ee 515
a67bbe50 516.description-content {
b919ea92 517 overflow-wrap: break-word;
a67bbe50
SL
518 > p {
519 margin: 0;
ef4e04ee 520 }
f0fc8a19 521}
fed1cc73
SL
522
523.cal_courses_flt {
524 color: #868e96;
525}