From 3c7a4833e5d229949a30ea6675f6fdb48abd8f66 Mon Sep 17 00:00:00 2001 From: Jun Pataleta Date: Sat, 15 Aug 2020 01:17:20 +0800 Subject: [PATCH] MDL-69394 calendar: Fix event colour indicator contrast * Darkened the link and clickable icon colours inside coloured events. * Added borders around event colour indicators inside the month-view of the calendar for better contrast against the white background. --- theme/boost/scss/moodle/calendar.scss | 68 ++++++++++++++++++++++++++- theme/boost/style/moodle.css | 55 +++++++++++++++++----- theme/classic/style/moodle.css | 55 +++++++++++++++++----- 3 files changed, 153 insertions(+), 25 deletions(-) diff --git a/theme/boost/scss/moodle/calendar.scss b/theme/boost/scss/moodle/calendar.scss index 53fdb52eac8..6de983fd84c 100644 --- a/theme/boost/scss/moodle/calendar.scss +++ b/theme/boost/scss/moodle/calendar.scss @@ -1,35 +1,64 @@ /* calendar.less */ // Calendar colour variables defined. -$calendarEventCategoryColor: #d8bfd8 !default; // Pale purple. +$calendarEventCategoryColor: #e0cbe0 !default; // Pale purple. $calendarEventCourseColor: #ffd3bd !default; // Pale red. $calendarEventGlobalColor: #d6f8cd !default; // Pale green. $calendarEventGroupColor: #fee7ae !default; // Pale yellow. $calendarEventUserColor: #dce7ec !default; // Pale blue. $calendarEventOtherColor: #ced4da !default; // Pale gray. +// Border colours for the event colour indicators. +$calendarEventCategoryBorder: 2px solid #9e619f !default; // Purple. +$calendarEventCourseBorder: 2px solid #d34600 !default; // Red-orange. +$calendarEventGlobalBorder: 2px solid #2b8713 !default; // Green. +$calendarEventGroupBorder: 2px solid #9a6e02 !default; // Dark orange. +$calendarEventUserBorder: 2px solid #4e7c91 !default; // Blue. +$calendarEventOtherBorder: 2px solid #687889 !default; // Gray. + +// This will be the colour of mini-calendar links, hide/show filter icons, edit/delete icon buttons. +$calendarEventColor: #0d5ca1 !default; + // Calendar event background colours defined. .calendar_event_category { background-color: $calendarEventCategoryColor; + .commands a { + color: $calendarEventColor; + } } .calendar_event_course { background-color: $calendarEventCourseColor; + .commands a { + color: $calendarEventColor; + } } .calendar_event_site { background-color: $calendarEventGlobalColor; + .commands a { + color: $calendarEventColor; + } } .calendar_event_group { background-color: $calendarEventGroupColor; + .commands a { + color: $calendarEventColor; + } } .calendar_event_user { background-color: $calendarEventUserColor; + .commands a { + color: $calendarEventColor; + } } .calendar_event_other { background-color: $calendarEventOtherColor; + .commands a { + color: $calendarEventColor; + } } // Calendar restyling. @@ -139,25 +168,31 @@ $calendarEventOtherColor: #ced4da !default; // Pale gray. &.calendar_event_category { background-color: $calendarEventCategoryColor; + border: $calendarEventCategoryBorder; } &.calendar_event_course { background-color: $calendarEventCourseColor; + border: $calendarEventCourseBorder; } &.calendar_event_site { background-color: $calendarEventGlobalColor; + border: $calendarEventGlobalBorder; } &.calendar_event_group { background-color: $calendarEventGroupColor; + border: $calendarEventGroupBorder; } &.calendar_event_user { background-color: $calendarEventUserColor; + border: $calendarEventUserBorder; } &.calendar_event_other { background-color: $calendarEventOtherColor; + border: $calendarEventOtherBorder; } } } @@ -289,6 +324,7 @@ $calendarEventOtherColor: #ced4da !default; // Pale gray. width: 100%; height: 100%; display: block; + color: $calendarEventColor; } &.duration_global { @@ -389,6 +425,36 @@ $calendarEventOtherColor: #ced4da !default; // Pale gray. margin-bottom: 0.2em; span { + &.calendar_event_category { + i { + color: $calendarEventColor; + } + } + &.calendar_event_course { + i { + color: $calendarEventColor; + } + } + &.calendar_event_site { + i { + color: $calendarEventColor; + } + } + &.calendar_event_group { + i { + color: $calendarEventColor; + } + } + &.calendar_event_user { + i { + color: $calendarEventColor; + } + } + &.calendar_event_other { + i { + color: $calendarEventColor; + } + } img { padding: 0 0.2em; margin: 0; diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 64777c984d0..6a0ebbef7dc 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -12721,22 +12721,34 @@ body.h5p-embed .h5pmessages { /* calendar.less */ .calendar_event_category { - background-color: #d8bfd8; } + background-color: #e0cbe0; } + .calendar_event_category .commands a { + color: #0d5ca1; } .calendar_event_course { background-color: #ffd3bd; } + .calendar_event_course .commands a { + color: #0d5ca1; } .calendar_event_site { background-color: #d6f8cd; } + .calendar_event_site .commands a { + color: #0d5ca1; } .calendar_event_group { background-color: #fee7ae; } + .calendar_event_group .commands a { + color: #0d5ca1; } .calendar_event_user { background-color: #dce7ec; } + .calendar_event_user .commands a { + color: #0d5ca1; } .calendar_event_other { background-color: #ced4da; } + .calendar_event_other .commands a { + color: #0d5ca1; } .path-calendar .calendartable { width: 100%; @@ -12813,17 +12825,23 @@ body.h5p-embed .h5pmessages { border-radius: 6px; vertical-align: middle; } .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_category { - background-color: #d8bfd8; } + background-color: #e0cbe0; + border: 2px solid #9e619f; } .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_course { - background-color: #ffd3bd; } + background-color: #ffd3bd; + border: 2px solid #d34600; } .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_site { - background-color: #d6f8cd; } + background-color: #d6f8cd; + border: 2px solid #2b8713; } .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_group { - background-color: #fee7ae; } + background-color: #fee7ae; + border: 2px solid #9a6e02; } .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_user { - background-color: #dce7ec; } + background-color: #dce7ec; + border: 2px solid #4e7c91; } .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_other { - background-color: #ced4da; } + background-color: #ced4da; + border: 2px solid #687889; } .path-calendar .maincalendar .calendarmonth td { height: 5em; } .path-calendar .maincalendar .calendarmonth .clickable:hover { @@ -12844,7 +12862,7 @@ body.h5p-embed .h5pmessages { color: #0b4f8a; text-decoration: underline; } .path-calendar .maincalendar .calendar_event_category { - border-color: #d8bfd8; } + border-color: #e0cbe0; } .path-calendar .maincalendar .calendar_event_course { border-color: #ffd3bd; } .path-calendar .maincalendar .calendar_event_site { @@ -12887,17 +12905,18 @@ body.h5p-embed .h5pmessages { .block .minicalendar td a { width: 100%; height: 100%; - display: block; } + display: block; + color: #0d5ca1; } .block .minicalendar td.duration_global { border-top: 1px solid #d6f8cd; border-bottom: 1px solid #d6f8cd; } .block .minicalendar td.duration_global.duration_finish { background-color: #d6f8cd; } .block .minicalendar td.duration_category { - border-top: 1px solid #d8bfd8; - border-bottom: 1px solid #d8bfd8; } + border-top: 1px solid #e0cbe0; + border-bottom: 1px solid #e0cbe0; } .block .minicalendar td.duration_category.duration_finish { - background-color: #d8bfd8; } + background-color: #e0cbe0; } .block .minicalendar td.duration_course { border-top: 1px solid #ffd3bd; border-bottom: 1px solid #ffd3bd; } @@ -12949,6 +12968,18 @@ body.h5p-embed .h5pmessages { .block .calendar_filters li { margin-bottom: 0.2em; } + .block .calendar_filters li span.calendar_event_category i { + color: #0d5ca1; } + .block .calendar_filters li span.calendar_event_course i { + color: #0d5ca1; } + .block .calendar_filters li span.calendar_event_site i { + color: #0d5ca1; } + .block .calendar_filters li span.calendar_event_group i { + color: #0d5ca1; } + .block .calendar_filters li span.calendar_event_user i { + color: #0d5ca1; } + .block .calendar_filters li span.calendar_event_other i { + color: #0d5ca1; } .block .calendar_filters li span img { padding: 0 0.2em; margin: 0; } diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index c346fb716ce..f19eba70db3 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -12936,22 +12936,34 @@ body.h5p-embed .h5pmessages { /* calendar.less */ .calendar_event_category { - background-color: #d8bfd8; } + background-color: #e0cbe0; } + .calendar_event_category .commands a { + color: #0d5ca1; } .calendar_event_course { background-color: #ffd3bd; } + .calendar_event_course .commands a { + color: #0d5ca1; } .calendar_event_site { background-color: #d6f8cd; } + .calendar_event_site .commands a { + color: #0d5ca1; } .calendar_event_group { background-color: #fee7ae; } + .calendar_event_group .commands a { + color: #0d5ca1; } .calendar_event_user { background-color: #dce7ec; } + .calendar_event_user .commands a { + color: #0d5ca1; } .calendar_event_other { background-color: #ced4da; } + .calendar_event_other .commands a { + color: #0d5ca1; } .path-calendar .calendartable { width: 100%; @@ -13028,17 +13040,23 @@ body.h5p-embed .h5pmessages { border-radius: 6px; vertical-align: middle; } .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_category { - background-color: #d8bfd8; } + background-color: #e0cbe0; + border: 2px solid #9e619f; } .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_course { - background-color: #ffd3bd; } + background-color: #ffd3bd; + border: 2px solid #d34600; } .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_site { - background-color: #d6f8cd; } + background-color: #d6f8cd; + border: 2px solid #2b8713; } .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_group { - background-color: #fee7ae; } + background-color: #fee7ae; + border: 2px solid #9a6e02; } .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_user { - background-color: #dce7ec; } + background-color: #dce7ec; + border: 2px solid #4e7c91; } .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_other { - background-color: #ced4da; } + background-color: #ced4da; + border: 2px solid #687889; } .path-calendar .maincalendar .calendarmonth td { height: 5em; } .path-calendar .maincalendar .calendarmonth .clickable:hover { @@ -13059,7 +13077,7 @@ body.h5p-embed .h5pmessages { color: #0b4f8a; text-decoration: underline; } .path-calendar .maincalendar .calendar_event_category { - border-color: #d8bfd8; } + border-color: #e0cbe0; } .path-calendar .maincalendar .calendar_event_course { border-color: #ffd3bd; } .path-calendar .maincalendar .calendar_event_site { @@ -13102,17 +13120,18 @@ body.h5p-embed .h5pmessages { .block .minicalendar td a { width: 100%; height: 100%; - display: block; } + display: block; + color: #0d5ca1; } .block .minicalendar td.duration_global { border-top: 1px solid #d6f8cd; border-bottom: 1px solid #d6f8cd; } .block .minicalendar td.duration_global.duration_finish { background-color: #d6f8cd; } .block .minicalendar td.duration_category { - border-top: 1px solid #d8bfd8; - border-bottom: 1px solid #d8bfd8; } + border-top: 1px solid #e0cbe0; + border-bottom: 1px solid #e0cbe0; } .block .minicalendar td.duration_category.duration_finish { - background-color: #d8bfd8; } + background-color: #e0cbe0; } .block .minicalendar td.duration_course { border-top: 1px solid #ffd3bd; border-bottom: 1px solid #ffd3bd; } @@ -13164,6 +13183,18 @@ body.h5p-embed .h5pmessages { .block .calendar_filters li { margin-bottom: 0.2em; } + .block .calendar_filters li span.calendar_event_category i { + color: #0d5ca1; } + .block .calendar_filters li span.calendar_event_course i { + color: #0d5ca1; } + .block .calendar_filters li span.calendar_event_site i { + color: #0d5ca1; } + .block .calendar_filters li span.calendar_event_group i { + color: #0d5ca1; } + .block .calendar_filters li span.calendar_event_user i { + color: #0d5ca1; } + .block .calendar_filters li span.calendar_event_other i { + color: #0d5ca1; } .block .calendar_filters li span img { padding: 0 0.2em; margin: 0; } -- 2.17.1