[IMP] website_slides: Add color to course tags

This commit allows assignment and visibility of colors to course tags.
In order to reuse existing code, the colors offered are the same colors
used for Kanban tags.

Visibility of these tag colors has been added to:
- slide channel form view
- individual course website
- courses (not-filtered) website
- user profile "about" page

Note that visibility was purposely not added to:
- Kanban view for courses since "no color" assigned tags are not shown in
  the kanban view by pre-existing design.
- Filtered courses website since selected tag filters are already
  color highlighted to make selected tag filter(s) more obvious.

Supports Task: 2128166
PR #44365
Upgrade PR: odoo/upgrade#862

1 files changed, 30 insertions, 0 deletions

diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index fdff5ace23d..815ae9aa050 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -58,6 +58,36 @@ $o-wslides-fs-side-width: 300px;
     }
 }
 
+// Color tags according to assigned background color.
+.o_wslides_channel_tag {
+    vertical-align: middle;
+    @for $size from 1 through length($o-colors) {
+        &.o_tag_color_#{$size - 1} {
+            $background-color: white;
+            // no color selected
+            @if $size == 1 {
+                & {
+                    color: black;
+                    background-color: $background-color;
+                    box-shadow: inset 0 0 0 1px nth($o-colors, $size);
+                }
+            } @else {
+                $background-color: nth($o-colors, $size);
+                & {
+                    color: white;
+                    background-color: $background-color;
+                }
+            }
+            @at-root a#{&} {
+                &:hover {
+                    color: color-yiq($background-color);
+                    background-color: darken($background-color, 10%);
+                }
+            }
+        }
+    }
+}
+
 .o_wslides_body {
     background-color: $o-wslides-color-bg;