From cf013d606db4a20e922b0ff02c30d437f0696197 Mon Sep 17 00:00:00 2001
From: Serghei Mihai <smihai@entrouvert.com>
Date: Wed, 6 Apr 2022 12:14:57 +0200
Subject: [PATCH] misc: make timetable cells colors customizable (#63622)

---
 help/fr/misc-scss.page     | 30 ++++++++++++++++++++++++++++++
 static/includes/_misc.scss | 17 ++++++++++++-----
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/help/fr/misc-scss.page b/help/fr/misc-scss.page
index ed64c9bb..1c0674f3 100644
--- a/help/fr/misc-scss.page
+++ b/help/fr/misc-scss.page
@@ -618,6 +618,36 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   </td>
   <td><p><var>null</var></p></td>
  </tr>
+ <tr>
+  <td><p><code>$timetable-cell-background</code></p></td>
+  <td><p>Couleur de fond des créneaux horaires.</p>
+  </td>
+  <td><p><var>transparentize($button-background, 0.8)</var></p></td>
+ </tr>
+ <tr>
+  <td><p><code>$timetable-cell-hover-color</code></p></td>
+  <td><p>Couleur du texte au survol des créneaux horaires.</p>
+  </td>
+  <td><p><var>$button-color</var></p></td>
+ </tr>
+ <tr>
+  <td><p><code>$timetable-cell-hover-background</code></p></td>
+  <td><p>Couleur de fond au survol des créneaux horaires.</p>
+  </td>
+  <td><p><var>$button-background</var></p></td>
+ </tr>
+ <tr>
+  <td><p><code>$timetable-cell-selected-color</code></p></td>
+  <td><p>Couleur du texte du créneau horaire selectionné.</p>
+  </td>
+  <td><p><var>$timetable-cell-hover-color</var></p></td>
+ </tr>
+ <tr>
+  <td><p><code>$timetable-cell-selected-background</code></p></td>
+  <td><p>Couleur de fond du créneau horaire selectionné.</p>
+  </td>
+  <td><p><var>$timetable-cell-hover-background</var></p></td>
+ </tr>
 </table>
 </section>
 
diff --git a/static/includes/_misc.scss b/static/includes/_misc.scss
index 96fa0901..a0c62119 100644
--- a/static/includes/_misc.scss
+++ b/static/includes/_misc.scss
@@ -12,6 +12,13 @@ $notification_info_color: adjust-hue($notification_base_color, 220deg) !default;
 $notification-style: classic !default;
 
 $notification-icon-size: null !default;
+
+$timetable-cell-background: transparentize($button-background, 0.8) !default;
+$timetable-cell-hover-color: $button-color !default;
+$timetable-cell-hover-background: $button-background !default;
+$timetable-cell-selected-color: $timetable-cell-hover-color !default;
+$timetable-cell-selected-background: $timetable-cell-hover-background !default;
+
 @if $notification-style == border-bar {
 	$notification-icon-size: 1.5rem !default;
 } @else {
@@ -723,15 +730,15 @@ div.timetable-widget {
 	}
 
 	span.timetable-cell.selectable {
-		background: transparentize($button-background, 0.8);
+		background: $timetable-cell-background;
 		&:hover {
-			background: $button-background;
-			color: $button-color;
+			background: $timetable-cell-hover-background;
+			color: $timetable-cell-hover-color;
 			box-shadow: 1px 0px 5px $button-background;
 		}
 		&.on {
-			background: $button-background;
-			color: $button-color;
+			background: $timetable-cell-selected-background;
+			color: $timetable-cell-selected-color;
 		}
 	}