mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-17 21:49:15 +01:00
Code Issues Projects Releases Wiki Activity

Merge branch 'MDL-83725-main' of https://github.com/ferranrecio/moodle

Browse Source
This commit is contained in:
Sara Arjona 2025-01-08 13:46:36 +01:00
commit 208ea091f0
No known key found for this signature in database
6 changed files with 73 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.upgradenotes/MDL-83725-2024121910085182.yml Normal file
View File

@ -0,0 +1,12 @@
issueNumber: MDL-83725
notes:
theme_boost:
- message: >-
From now on, themes can customise the activity icon colours using simple
CSS variables. The new variables are $activity-icon-administration-bg,
$activity-icon-assessment-bg, $activity-icon-collaboration-bg,
$activity-icon-communication-bg, $activity-icon-content-bg,
$activity-icon-interactivecontent-bg. All previous
`$activity-icon-*-filter` elements can be removed, as they are no longer
in use.
type: changed

15
admin/tool/componentlibrary/content/moodle/components/activityicons.md
View File

@ -74,7 +74,7 @@ Since Moodle 4.4, the available activity purposes are:
### Purpose colours
The activity icon colours can be customised using the theme Boost 'Raw initial SCSS' feature. Simply copy any of these scss variables that you want to customize, change the colour value, generate the filter using, for instance https://codepen.io/sosuke/pen/Pjoqqp and done! There is no background colour or filter for the 'Other' or the 'Interface' purposes.
The activity icon colours can be customised using the theme Boost 'Raw initial SCSS' feature. The following variables are available:
{{< highlight scss >}}
$activity-icon-administration-bg: #da58ef !default;
@ -83,19 +83,6 @@ $activity-icon-collaboration-bg: #5b40ff !default;
$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;
{{</ highlight >}}
### Custom activity icons

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 */