Skip to content

Commit

Permalink
MDL-69394 calendar: Fix event colour indicator contrast
Browse files Browse the repository at this point in the history 
* 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.
  • Loading branch information
@junpataleta
junpataleta committed Aug 26, 2020
1 parent 96fac6d commit b4ab127
Show file tree
Hide file tree
Showing 3 changed files with 153 additions and 25 deletions.
68 changes: 67 additions & 1 deletion theme/boost/scss/moodle/calendar.scss
View file
@@ -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.
Expand Down Expand Up @@ -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;
}
}
}
Expand Down Expand Up @@ -289,6 +324,7 @@ $calendarEventOtherColor: #ced4da !default; // Pale gray.
width: 100%;
height: 100%;
display: block;
color: $calendarEventColor;
}

&.duration_global {
Expand Down Expand Up @@ -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;
Expand Down
55 changes: 43 additions & 12 deletions theme/boost/style/moodle.css
View file
Expand Up @@ -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%;
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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; }
Expand Down Expand Up @@ -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; }
Expand Down
55 changes: 43 additions & 12 deletions theme/classic/style/moodle.css
View file
Expand Up @@ -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%;
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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; }
Expand Down Expand Up @@ -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; }
Expand Down

0 comments on commit b4ab127

Please sign in to comment.