moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-08 10:26:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-83725 theme: dynamic activity icons colors

Browse source 
Now themes can change the activity purpose colors using only the
$activity-icon-XXXX-bg scss variables. The filter is not computed using
a sass mixin intead of a custom filter.
This commit is contained in:
ferran 2024-11-21 10:08:32 +01:00
parent ab5692acdf
commit 41acfca9a8
6 changed files with 73 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

30
theme/boost/scss/moodle/icons.scss
View file

@ -28,6 +28,34 @@ $iconsizes: map-merge((
), $iconsizes);
// stylelint-enable
// This mixin change an icon color using filters.
// The code is adapted from https://jsfiddle.net/Tegos/3fchp0qm/ example.
@mixin recolor-icon($color: #000, $opacity: 1) {
// Extracting the color component using / 255 is deprecated in Sass.
// However, the alternative of using math.div is not working in moodle yet.
// The workaround to extract the color component is multiply by 1/255 as float.
$r: red($color) * 0.00392156862745098;
$g: green($color) * 0.00392156862745098;
$b: blue($color) * 0.00392156862745098;
$a: $opacity;
$svg-filter-id: "recolor";
$svg-url: 'data:image/svg+xml;utf8,' +
'<svg xmlns="http://www.w3.org/2000/svg">' +
'<filter id="#{$svg-filter-id}" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="' +
'0 0 0 0 #{$r} ' +
'0 0 0 0 #{$g} ' +
'0 0 0 0 #{$b} ' +
'0 0 0 #{$a} 0 ' +
'"/>' +
'</filter>' +
'</svg>' +
'##{$svg-filter-id}';
filter: url($svg-url);
}
.icon {
max-width: map-get($iconsizes, 4);
max-height: map-get($iconsizes, 4);
@ -195,7 +223,7 @@ img.icon {
.activityicon,
.icon {
&:not(.nofilter) {
filter: $value;
@include recolor-icon($value, 1);
}
}
}

26
theme/boost/scss/moodle/variables.scss
View file

@ -46,28 +46,16 @@ $activity-icon-communication-bg: #eb6200 !default;
$activity-icon-content-bg: #0099ad !default;
$activity-icon-interactivecontent-bg: #8d3d1b !default;
$activity-icon-administration-filter:
invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%) !default;
$activity-icon-assessment-filter:
invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%) !default;
$activity-icon-collaboration-filter:
invert(25%) sepia(54%) saturate(6226%) hue-rotate(245deg) brightness(100%) contrast(102%) !default;
$activity-icon-communication-filter:
invert(48%) sepia(74%) saturate(4887%) hue-rotate(11deg) brightness(102%) contrast(101%) !default;
$activity-icon-content-filter:
invert(49%) sepia(52%) saturate(4675%) hue-rotate(156deg) brightness(89%) contrast(102%) !default;
$activity-icon-interactivecontent-filter:
invert(25%) sepia(63%) saturate(1152%) hue-rotate(344deg) brightness(94%) contrast(91%) !default;
// This is just to make it easier to iterate the colors.
$activity-icon-colors: () !default;
$activity-icon-colors: map-merge(
(
"administration": $activity-icon-administration-filter,
"assessment": $activity-icon-assessment-filter,
"collaboration": $activity-icon-collaboration-filter,
"communication": $activity-icon-communication-filter,
"content": $activity-icon-content-filter,
"interactivecontent": $activity-icon-interactivecontent-filter,
"administration": $activity-icon-administration-bg,
"assessment": $activity-icon-assessment-bg,
"collaboration": $activity-icon-collaboration-bg,
"communication": $activity-icon-communication-bg,
"content": $activity-icon-content-bg,
"interactivecontent": $activity-icon-interactivecontent-bg,
),
$activity-icon-colors
);

24
theme/boost/style/moodle.css
View file

@ -26337,32 +26337,32 @@ img.icon {
.activityiconcontainer.administration:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.administration:not(.isbranded) .icon:not(.nofilter) {
filter: invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%);
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.8549019608 0 0 0 0 0.3450980392 0 0 0 0 0.937254902 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.assessment:not(.isbranded) .icon:not(.nofilter) {
filter: invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%);
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9764705882 0 0 0 0 0 0 0 0 0 0.5254901961 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.collaboration:not(.isbranded) .icon:not(.nofilter) {
filter: invert(25%) sepia(54%) saturate(6226%) hue-rotate(245deg) brightness(100%) contrast(102%);
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.3568627451 0 0 0 0 0.2509803922 0 0 0 0 1 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.communication:not(.isbranded) .icon:not(.nofilter) {
filter: invert(48%) sepia(74%) saturate(4887%) hue-rotate(11deg) brightness(102%) contrast(101%);
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9215686275 0 0 0 0 0.3843137255 0 0 0 0 0 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.content:not(.isbranded) .icon:not(.nofilter) {
filter: invert(49%) sepia(52%) saturate(4675%) hue-rotate(156deg) brightness(89%) contrast(102%);
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6 0 0 0 0 0.6784313725 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.interactivecontent:not(.isbranded) .icon:not(.nofilter) {
filter: invert(25%) sepia(63%) saturate(1152%) hue-rotate(344deg) brightness(94%) contrast(91%);
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.5529411765 0 0 0 0 0.2392156863 0 0 0 0 0.1058823529 0 0 0 1 0 "/></filter></svg>#recolor');
}
.icon-box {
@ -26402,12 +26402,12 @@ img.icon {
}
:root {
--activityadministration: invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%);
--activityassessment: invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%);
--activitycollaboration: invert(25%) sepia(54%) saturate(6226%) hue-rotate(245deg) brightness(100%) contrast(102%);
--activitycommunication: invert(48%) sepia(74%) saturate(4887%) hue-rotate(11deg) brightness(102%) contrast(101%);
--activitycontent: invert(49%) sepia(52%) saturate(4675%) hue-rotate(156deg) brightness(89%) contrast(102%);
--activityinteractivecontent: invert(25%) sepia(63%) saturate(1152%) hue-rotate(344deg) brightness(94%) contrast(91%);
--activityadministration: #da58ef;
--activityassessment: #f90086;
--activitycollaboration: #5b40ff;
--activitycommunication: #eb6200;
--activitycontent: #0099ad;
--activityinteractivecontent: #8d3d1b;
}
/* admin.less */

24
theme/classic/style/moodle.css
View file

@ -26337,32 +26337,32 @@ img.icon {
.activityiconcontainer.administration:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.administration:not(.isbranded) .icon:not(.nofilter) {
filter: invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%);
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.8549019608 0 0 0 0 0.3450980392 0 0 0 0 0.937254902 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.assessment:not(.isbranded) .icon:not(.nofilter) {
filter: invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%);
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9764705882 0 0 0 0 0 0 0 0 0 0.5254901961 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.collaboration:not(.isbranded) .icon:not(.nofilter) {
filter: invert(25%) sepia(54%) saturate(6226%) hue-rotate(245deg) brightness(100%) contrast(102%);
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.3568627451 0 0 0 0 0.2509803922 0 0 0 0 1 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.communication:not(.isbranded) .icon:not(.nofilter) {
filter: invert(48%) sepia(74%) saturate(4887%) hue-rotate(11deg) brightness(102%) contrast(101%);
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9215686275 0 0 0 0 0.3843137255 0 0 0 0 0 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.content:not(.isbranded) .icon:not(.nofilter) {
filter: invert(49%) sepia(52%) saturate(4675%) hue-rotate(156deg) brightness(89%) contrast(102%);
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6 0 0 0 0 0.6784313725 0 0 0 1 0 "/></filter></svg>#recolor');
}
.activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.interactivecontent:not(.isbranded) .icon:not(.nofilter) {
filter: invert(25%) sepia(63%) saturate(1152%) hue-rotate(344deg) brightness(94%) contrast(91%);
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.5529411765 0 0 0 0 0.2392156863 0 0 0 0 0.1058823529 0 0 0 1 0 "/></filter></svg>#recolor');
}
.icon-box {
@ -26402,12 +26402,12 @@ img.icon {
}
:root {
--activityadministration: invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%);
--activityassessment: invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%);
--activitycollaboration: invert(25%) sepia(54%) saturate(6226%) hue-rotate(245deg) brightness(100%) contrast(102%);
--activitycommunication: invert(48%) sepia(74%) saturate(4887%) hue-rotate(11deg) brightness(102%) contrast(101%);
--activitycontent: invert(49%) sepia(52%) saturate(4675%) hue-rotate(156deg) brightness(89%) contrast(102%);
--activityinteractivecontent: invert(25%) sepia(63%) saturate(1152%) hue-rotate(344deg) brightness(94%) contrast(91%);
--activityadministration: #da58ef;
--activityassessment: #f90086;
--activitycollaboration: #5b40ff;
--activitycommunication: #eb6200;
--activitycontent: #0099ad;
--activityinteractivecontent: #8d3d1b;
}
/* admin.less */