search

moodle-an-hochschulen / moodle-theme_boost_union

Theme Boost Union is an enhanced child theme of Boost which is intended, on the one hand, to make Boost simply more configurable and, on the other hand, to provide helpful additional features for the daily Moodle operation of admins, teachers and students.
GNU General Public License v3.0
55 stars 49 forks source link

Enable to set activity icon outline colors #631

Open lucaboesch opened 2 months ago

lucaboesch commented 2 months ago

In Moodle 4.4 activity icons will be shown as outlines.

image

The colors of those outlines will be set not with RGB hex values but like such:

invert(33%) sepia(8%) saturate(2138%) hue-rotate(227deg) brightness(92%) contrast(82%) !default;

This issue is about not forgetting to create settings to be able to modify those values.

davidscotson commented 1 month ago

Since this method was introduced into Moodle, browsers have added wider support for the CSS Masks feature, which is possible a more straightforward way to recolor black and white icons now. Though you can't directly apply it to img tags, which might be a drawback.

https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image

wiebkemueller-hsh commented 1 month ago

For all institutions that use the coloring of the icons as a way to brand the site this is a blocker!

lucaboesch commented 3 weeks ago

https://codepen.io/sosuke/pen/Pjoqqp and https://isotropic.co/tool/hex-color-to-css-filter are two resources that help translate hex code to filters. At least, that's what I did, and then I added

/* Moodle 4.4 modifications */
$activity-icon-administration-filter:
  invert(34%) sepia(15%) saturate(1084%) hue-rotate(227deg) brightness(92%) contrast(90%) !default; /* #645078 */
$activity-icon-assessment-filter:
  invert(58%) sepia(7%) saturate(1230%) hue-rotate(238deg) brightness(96%) contrast(88%) !default; /* #a087aa */
$activity-icon-collaboration-filter:
  invert(54%) sepia(79%) saturate(671%) hue-rotate(317deg) brightness(80%) contrast(108%) !default; /* #d25a50 */
$activity-icon-communication-filter:
  invert(56%) sepia(7%) saturate(1650%) hue-rotate(81deg) brightness(97%) contrast(80%) !default; /* #699673 */
$activity-icon-content-filter:
  invert(57%) sepia(40%) saturate(421%) hue-rotate(162deg) brightness(96%) contrast(82%) !default; /* #699bbe */
$activity-icon-interactivecontent-filter:
  invert(34%) sepia(15%) saturate(1084%) hue-rotate(227deg) brightness(92%) contrast(90%) !default; /* #645078 */

to Raw initial SCSS. This to whom is interested in a manual workaround.

lucaboesch commented 3 weeks ago

Under https://wiki.cgx.me/code/php/colorsolver there's an approach using PHP, openly licenced https://www.shaftinc.fr/misc/licence-iv.txt which in its terms and conditions says

  1. Do what you like. That said, if the work is modified, I encourage you to have a drink.

🤣

wiebkemueller-hsh commented 3 weeks ago

[laugh] Wiebke Müller reacted to your message:

From: Luca Bösch @.> Sent: Tuesday, June 4, 2024 11:44:26 AM To: moodle-an-hochschulen/moodle-theme_boost_union @.> Cc: Wiebke Müller @.>; Comment @.> Subject: [EXTERN] Re: [moodle-an-hochschulen/moodle-theme_boost_union] Enable to set activity icon outline colors (Issue #631)

Under https://wiki.cgx.me/code/php/colorsolver there's an approach using PHP, openly licenced https://www.shaftinc.fr/misc/licence-iv.txt which in its terms and conditions says

  1. Do what you like. That said, if the work is modified, I encourage you to have a drink.

🤣

— Reply to this email directly, view it on GitHubhttps://github.com/moodle-an-hochschulen/moodle-theme_boost_union/issues/631#issuecomment-2147324055, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ARJQDRIYKDAB3YNZAGHHG6TZFWSBVAVCNFSM6AAAAABGJCSBE2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBXGMZDIMBVGU. You are receiving this because you commented.Message ID: @.***>