Handle canceled events

1 files changed, 26 insertions, 0 deletions

diff --git a/stylesheets/actualités.css b/stylesheets/actualités.css
index bb6b3f8..95432dd 100644
--- a/stylesheets/actualités.css
+++ b/stylesheets/actualités.css
@@ -44,6 +44,16 @@ a.event {
     text-align: center;
 }
 
+.event.canceled {
+    opacity: 50%;
+    transition: 0.5s;
+}
+.event.canceled .summary::before {
+    display: block;
+    content: "ANNULÉ";
+    color: red;
+}
+
 .details > .detail {
     display: grid;
     grid-template-columns: 2em 1fr;
@@ -78,6 +88,17 @@ a.event {
     font-size: x-small;
 }
 
+.details.canceled::before {
+    display: block;
+    content: "ANNULÉ";
+    color: red;
+}
+
+.details.canceled .detail,
+.details.canceled .more {
+    opacity: 50%;
+}
+
 @media (min-width: 40em) {
     main {
         display: grid;
@@ -119,6 +140,11 @@ a.event {
         transition: 0.5s;
     }
 
+    .event.canceled:hover,
+    .event.canceled.active {
+        opacity: 1;
+    }
+
     .event:not(.active):hover .summary,
     .event:not(.active):focus-within .summary,
     .event.active .summary {