From 2a43ce5702fe65afe02d0e239263f9e0342c439d 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 e8977fd7897..6750fd589de 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 4039bfef09d..71d8502e50e 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -12741,22 +12741,34 @@ input[disabled] { /* 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%; @@ -12833,17 +12845,23 @@ input[disabled] { 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 { @@ -12864,7 +12882,7 @@ input[disabled] { 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 { @@ -12907,17 +12925,18 @@ input[disabled] { .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; } @@ -12969,6 +12988,18 @@ input[disabled] { .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 0ad4ba9ff7d..92aefa1d25a 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -12955,22 +12955,34 @@ input[disabled] { /* 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%; @@ -13047,17 +13059,23 @@ input[disabled] { 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 { @@ -13078,7 +13096,7 @@ input[disabled] { 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 { @@ -13121,17 +13139,18 @@ input[disabled] { .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; } @@ -13183,6 +13202,18 @@ input[disabled] { .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; }