style: clean footer.scss

- `.form_button` : ancienne interface des clics (changée en 2021)
- `.ui-dialog` : jquery-ui (retiré milieu 2025)
- `td>ul` : déjà déclaré dans `td,th{>ul}`, quelques lignes plus haut
- `.edit-bar` : littéralement jamais utilisé

club/templates/club/club_detail.jinja

@@ -26,15 +26,6 @@
 {% endblock %}
 
 {% block content %}
-  {% if user.can_edit(club) %}
-    <a
-      href="{{ url("core:page_edit", page_name=club.page.get_full_name()) }}"
-      class="btn btn-blue margin-bottom"
-    >
-      <i class="fa fa-pen-to-square"></i> {% trans %}Edit{% endtrans %}
-    </a>
-  {% endif %}
-
   <h3>{{ club.name }}</h3>
   <div id="club-detail" {% if links %}class="has-links"{% endif %}>
     <div id="club-attributes">

club/views.py

@@ -106,19 +106,20 @@ class ClubTabsMixin(TabedViewMixin):
         return self.object.get_display_name()
 
     def get_list_of_tabs(self):
-        if not self.request.user.has_perm("club.view_club"):
-            # The user will still be able to see the club main page,
-            # but nothing else.
-            # It's useless to display a tab with only one item, so return nothing.
-            return []
         tab_list = [
             {
                 "url": reverse("club:club_view", kwargs={"club_id": self.object.id}),
                 "slug": "infos",
                 "name": _("Infos"),
-            },
+            }
+        ]
+        if self.request.user.has_perm("club.view_club"):
+            tab_list.extend(
+                [
                     {
-                "url": reverse("club:club_members", kwargs={"club_id": self.object.id}),
+                        "url": reverse(
+                            "club:club_members", kwargs={"club_id": self.object.id}
+                        ),
                         "slug": "members",
                         "name": _("Members"),
                     },
@@ -129,12 +130,18 @@ class ClubTabsMixin(TabedViewMixin):
                         "slug": "elderlies",
                         "name": _("Old members"),
                     },
+                ]
+            )
+            if self.object.page:
+                tab_list.append(
                     {
-                "url": reverse("club:club_hist", kwargs={"club_id": self.object.id}),
+                        "url": reverse(
+                            "club:club_hist", kwargs={"club_id": self.object.id}
+                        ),
                         "slug": "history",
                         "name": _("History"),
-            },
-        ]
+                    }
+                )
         if self.request.user.can_edit(self.object):
             tab_list.extend(
                 [
@@ -152,6 +159,21 @@ class ClubTabsMixin(TabedViewMixin):
                         "slug": "edit",
                         "name": _("Edit"),
                     },
+                ]
+            )
+            if self.object.page and self.request.user.can_edit(self.object.page):
+                tab_list.append(
+                    {
+                        "url": reverse(
+                            "core:page_edit",
+                            kwargs={"page_name": self.object.page.get_full_name()},
+                        ),
+                        "slug": "page_edit",
+                        "name": _("Edit club page"),
+                    }
+                )
+            tab_list.extend(
+                [
                     {
                         "url": reverse(
                             "club:club_sellings", kwargs={"club_id": self.object.id}

com/static/com/css/news-detail.scss

@@ -5,7 +5,6 @@
   margin-top: 20px;
   padding: 0.4em;
   width: 80%;
-  background: $white-color;
 
   h4 {
     margin-top: 1em;

com/static/com/css/news-list.scss

@@ -32,7 +32,7 @@
 
   h3 {
     --box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 3px 7px 2px;
-    background: lighten($second-color, 5%);
+    background: var(--bg-yellow);
     box-shadow: var(--box-shadow);
     padding: .75rem;
     margin: 0 0 0.5em 0;
@@ -85,7 +85,7 @@
 
     #links_content {
       overflow: auto;
-      box-shadow: $shadow-color 1px 1px 1px;
+      box-shadow: var(--bg-darkened-off-white) 1px 1px 1px;
       min-height: 20em;
       padding: 1em;
 
@@ -111,7 +111,7 @@
     }
 
     #birthdays_content {
-      box-shadow: $shadow-color 1px 1px 1px;
+      box-shadow: var(--bg-darkened-off-white) 1px 1px 1px;
       padding: 1em;
 
       ul.birthdays_year {
@@ -123,7 +123,7 @@
           padding: 0.5em;
 
           &:nth-child(even) {
-            background: $secondary-neutral-light-color;
+            background: var(--bg-off-white);
           }
         }
 
@@ -141,7 +141,7 @@
 
   /* EVENTS TODAY AND NEXT FEW DAYS */
   .news_events_group {
-    box-shadow: $shadow-color 1px 1px 1px;
+    box-shadow: var(--bg-darkened-off-white) 1px 1px 1px;
     margin-left: 0;
     margin-bottom: 0.5em;
 
@@ -153,8 +153,8 @@
       display: table-cell;
       padding: 0.6em;
       vertical-align: middle;
-      background: $primary-neutral-dark-color;
-      color: $white-color;
+      background: var(--deepblue);
+      color: var(--text-white);
       text-transform: uppercase;
       text-align: center;
       font-weight: bold;
@@ -180,7 +180,7 @@
       }
 
       .news_event:nth-of-type(even) {
-        background: $primary-neutral-light-color;
+        background: var(--bg-white);
       }
 
       .news_event {

core/static/core/base.css

@@ -1,123 +0,0 @@
-/*--------------------------------RESET--------------------------------*/
-/*--------------------------------RESET--------------------------------*/
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol,
-ul {
-  /* list-style: none;*/
-}
-blockquote,
-q {
-  quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}

core/static/core/colors.scss

@@ -1,41 +1,37 @@
-$first-color: hsl(220, 100%, 50%);
-$second-color: hsl(48, 100%, 67%);
-$primary-color: hsl(219.9, 53.7%, 50%);
-$secondary-color: hsl(204, 64%, 44%);
-$primary-color-text: hsl(0, 0%, 100%);
-$secondary-color-text: hsla(0, 0%, 0%, 0.87);
+/**
+ * Sith theme variables
+ */
+:root {
+  --bg-yellow: #ffe270;
+  --bg-white: #f9fafb;
+  --bg-off-white: #f0f0f0;
+  --bg-darkened-off-white: #e3e3e3;
+  --bg-lightgrey: #d4d4d4;
 
-$primary-light-color: hsl(219.8, 46.4%, 64.9%);
-$primary-dark-color: hsl(203, 75%, 40%);
+  --text-white: #f9fafb;
+  --text-black: #2b2b2b;
+  --text-red: #eb2f06;
 
-$secondary-light-color: hsl(40, 68%, 65%);
-$secondary-dark-color: hsl(40, 68%, 35%);
-
-$primary-neutral-color: hsl(219.6, 20.8%, 50%);
-$primary-neutral-light-color: hsl(0, 0%, 94%);
-$primary-neutral-dark-color: hsl(210, 29%, 29%);
-
-$secondary-neutral-color: hsl(204, 64%, 44%);
-$secondary-neutral-light-color: hsl(0, 0%, 91%);
-$secondary-neutral-dark-color: hsl(40, 57.6%, 17%);
-
-$white-color: hsl(219.6, 20.8%, 98%);
-$black-color: hsl(0, 0%, 17%);
-$red-text-color: #eb2f06;
-$hovered-red-text-color: #ff4d4d;
+  --blue: #3b69c4;
+  --lightblue: #1a78b3;
+  // darkened-deepblue is 10% darker than deepblue
+  // This is explicitely declared, because the `darken` scss function
+  // isn't called at compile-time somehow.
+  --deepblue: #354a5f;
+  --darkened-deepblue: #23313e;
+}
 
+/**
+ * Brand colours.
+ * Those are officially defined by their respective companies,
+ * and so are more appropriate as scss variables.
+ */
 $faceblue: hsl(221, 44%, 41%);
 $twitblue: hsl(206, 82%, 63%);
 $discordblurple: #7289da;
 $instagradient: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
 $githubblack: rgb(22, 22, 20);
 
-$shadow-color: rgb(223, 223, 223);
-
-$background-button-color: hsl(0, 0%, 95%);
-
-$deepblue: #354a5f;
-
 @mixin shadow {
   box-shadow: rgba(60, 64, 67, 0.3) 0 1px 3px 0,
               rgba(60, 64, 67, 0.15) 0 4px 8px 3px;

core/static/core/components/card.scss

@@ -17,7 +17,7 @@
 }
 
 .card {
-  background-color: $primary-neutral-light-color;
+  background-color: var(--bg-off-white);
   border-radius: 5px;
   position: relative;
   box-sizing: border-box;
@@ -30,12 +30,12 @@
   gap: 20px;
 
   &:disabled {
-    background-color: darken($primary-neutral-light-color, 5%);
+    background-color: var(--bg-darkened-off-white);
     opacity: 65%;
   }
 
   &.clickable:not(:disabled):hover {
-    background-color: darken($primary-neutral-light-color, 5%);
+    background-color: var(--bg-darkened-off-white);
   }
 
   &.selected {

core/static/core/components/tabs.scss

@@ -11,7 +11,7 @@ ui-tab-group {
     .tab-headers {
       display: flex;
       flex-flow: row wrap;
-      background-color: $primary-neutral-light-color;
+      background-color: var(--bg-off-white);
       padding: 3px 12px 12px;
       column-gap: 20px;
       border-top-left-radius: 5px;
@@ -25,23 +25,27 @@ ui-tab-group {
         background-color: unset;
         position: relative;
 
+        &:hover {
+          background-color: var(--bg-lightgrey);
+        }
+
         &:after {
           content: '';
           position: absolute;
           bottom: 0;
           left: 0;
           width: 100%;
-          border-bottom: 4px solid darken($primary-neutral-light-color, 10%);
+          border-bottom: 4px solid var(--bg-lightgrey);
           border-radius: 2px;
           transition: all 0.2s ease-in-out;
         }
 
         &:hover:after {
-          border-bottom-color: darken($primary-neutral-light-color, 20%);
+          filter: brightness(85%);
         }
 
         &.active:after {
-          border-bottom-color: $primary-dark-color;
+          border-bottom-color: var(--lightblue);
         }
       }
     }

core/static/core/footer.scss

@@ -2,92 +2,75 @@
 @import "devices";
 
 footer.bottom-links {
-  >section>a {
+  > section > a {
     text-align: center;
   }
 
+  text-align: center;
+
+  hr {
+    border: none;
+  }
+
   @media (max-width: $small-devices) {
     margin-top: 0.6em;
     padding: 1.25em;
-    background-color: $primary-neutral-dark-color;
+    background-color: var(--deepblue);
 
     display: flex;
     flex-direction: column;
-    align-items: center;
 
     gap: 1.25em;
 
-    >section {
-
+    > section {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: center;
       gap: 0.8em;
-
     }
 
     a {
-      color: $white-color;
-      width: auto;
+      color: var(--text-white);
 
       &:hover {
-        color: $white-color;
-        text-shadow: 0.5px 0.5px 0.5px $shadow-color;
+        text-shadow: 0.5px 0.5px 0.5px var(--bg-darkened-off-white);
       }
     }
 
     .fa-github {
-      color: $white-color;
+      color: var(--text-white);
     }
 
     hr {
-      width: 100%;
-      height: 0px;
-      border: none;
-      border-top: 0.5px solid $white-color;
+      border-top: var(--bg-white) 1px solid;
     }
   }
 
+
   @media (min-width: $small-devices) {
     width: 90%;
     margin: 2em auto;
-
     font-size: 90%;
-    text-align: center;
-    vertical-align: middle;
 
     section:first-of-type {
       margin: 0.6em 0;
-      color: $white-color;
       border-radius: 5px;
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      background-color: $primary-neutral-dark-color;
-      box-shadow: $shadow-color 0 0 15px;
+      background-color: var(--deepblue);
 
       a {
-        color: $white-color;
-        width: auto;
         padding: 0.8em;
         flex: 1;
         font-weight: bold;
+        color: var(--text-white);
 
         &:hover {
-          color: $white-color;
-          text-shadow: 0.5px 0.5px 0.5px $shadow-color;
+          text-shadow: 0.5px 0.5px 0.5px var(--bg-darkened-off-white);
         }
       }
     }
-
-    .fa-github {
-      color: $githubblack;
-    }
-
-    hr {
-      border: none;
-      height: 5px;
-    }
   }
 }

core/static/core/forms.scss

@@ -16,7 +16,6 @@
   input[type="file"] {
     border: none;
     text-decoration: none;
-    background-color: $background-button-color;
     padding: 0.4em;
     margin: 0.1em;
     font-size: 1.2em;
@@ -24,7 +23,7 @@
     color: black;
 
     &:not(.link-like):not(:disabled):hover {
-      background: hsl(0, 0%, 83%);
+      background: var(--bg-lightgrey);
     }
   }
 
@@ -53,7 +52,7 @@
   .ts-control {
     border: none;
     text-decoration: none;
-    background-color: $background-button-color;
+    //background-color: $background-button-color;
     padding: 0.4em;
     margin: 0.1em;
     font-size: 1.2em;
@@ -64,7 +63,7 @@
   textarea {
     border: none;
     text-decoration: none;
-    background-color: $background-button-color;
+    //background-color: $background-button-color;
     padding: 7px;
     font-size: 1.2em;
     border-radius: 5px;
@@ -75,7 +74,7 @@
     border: none;
     text-decoration: none;
     font-size: 1.2em;
-    background-color: $background-button-color;
+    //background-color: $background-button-color;
     padding: 10px;
     border-radius: 5px;
     cursor: pointer;
@@ -83,14 +82,14 @@
 
   a:not(.button) {
     text-decoration: none;
-    color: $primary-dark-color;
+    color: var(--lightblue);
 
     &:hover {
-      color: $primary-light-color;
+      color: var(--blue);
     }
 
     &:active {
-      color: $primary-color;
+      color: var(--blue);
     }
   }
 }
@@ -762,16 +761,13 @@ form {
   // a submit input that should look like a regular <a>
   input[type="submit"], button {
     &.link-like {
-      color: $primary-dark-color;
+      color: var(--lightblue);
       &:hover {
-        color: $primary-light-color;
+        color: var(--blue);
       }
 
       &.link-red {
-        color: $red-text-color;
-        &:hover {
-          color: $hovered-red-text-color;
-        }
+        color: var(--text-red);
       }
       font-weight: normal;
       font-size: 100%;

core/static/core/header.scss

@@ -7,7 +7,7 @@ $background-color-hovered: #283747;
 
 .header {
   box-sizing: border-box;
-  background-color: $deepblue;
+  background-color: var(--deepblue);
   box-shadow: 3px 3px 3px 0 #dfdfdf;
   border-radius: 0;
   width: 100%;
@@ -96,7 +96,7 @@ $background-color-hovered: #283747;
         border-radius: 0;
         margin: 0;
         box-sizing: border-box;
-        background-color: $deepblue;
+        background-color: var(--deepblue);
         width: 45px;
         height: 25px;
         padding: 0;
@@ -212,7 +212,7 @@ $background-color-hovered: #283747;
           background-position: center center;
           background-size: cover;
           background-repeat: no-repeat;
-          background-color: $deepblue;
+          background-color: var(--deepblue);
         }
 
         >.options {
@@ -298,7 +298,7 @@ $background-color-hovered: #283747;
             width: 10px;
             height: 10px;
             padding: 5px;
-            background-color: $red-text-color;
+            background-color: var(--text-red);
             border-radius: 50%;
             position: absolute;
             top: -50%;

core/static/core/markdown.scss

@@ -1,7 +1,4 @@
 .markdown {
-  --bg-lightgrey: rgb(240, 241, 245);
-  --border-lightgrey: rgb(215, 216, 220);
-
   h1,
   h2,
   h3,
@@ -28,8 +25,8 @@
     font-size: 14px;
     tab-size: 4;
     border-radius: 4px;
-    border: 1px solid var(--border-lightgrey);
-    background-color: var(--bg-lightgrey);
+    border: 1px solid var(--bg-lightgrey);
+    background-color: var(--bg-off-white);
     padding: 1px 2px;
   }
 

core/static/core/navbar.scss

@@ -3,7 +3,7 @@
 $desktop-size: 500px;
 
 nav.navbar {
-  background-color: $primary-dark-color;
+  background-color: var(--lightblue);
   margin: 1em;
   color: white;
   border-radius: 0.6em;

core/static/core/pagination.scss

@@ -6,27 +6,21 @@
   margin: 30px;
 
   button {
-    background-color: $secondary-neutral-light-color;
+    background-color: var(--bg-off-white);
     min-width: 37px;
 
     &:hover {
-      background-color: darken($secondary-neutral-light-color, 10%);
-    }
-
-    &:disabled {
-      color: #fff;
-      background-color: darken($secondary-neutral-light-color, 5%);
+      background-color: var(--bg-lightgrey);
     }
 
     &.active,
     &.active:hover {
-      background-color: $primary-neutral-color;
+      background-color: var(--deepblue);
       color: white;
       border-radius: 50%;
     }
 
-    &:first-of-type,
-    &:last-of-type {
+    .pagination-arrow {
       // previous and next buttons
       &:disabled {
         // Hide the arrows when they are disabled, without

core/static/core/style.scss

@@ -2,12 +2,21 @@
 @import "forms";
 @import "devices";
 
+/*----- RESET -----*/
+* {
+  margin: 0;
+  padding: 0;
+}
+
+
 /*--------------------------------GENERAL------------------------------*/
 
 body {
   position: relative;
   width: 100%;
   font-family: sans-serif;
+  background-color: var(--bg-white);
+  line-height: 1;
 }
 
 [aria-busy] {
@@ -57,7 +66,7 @@ body {
 
   .collapse-header {
     color: white;
-    background-color: $deepblue;
+    background-color: var(--deepblue);
     padding: 5px 10px;
     display: flex;
     align-items: center;
@@ -141,7 +150,7 @@ body {
   }
 
   #info_box {
-    background: $primary-neutral-light-color;
+    background: var(--bg-off-white);
 
     &:before {
       content: "\f05a";
@@ -150,11 +159,11 @@ body {
   }
 
   #alert_box {
-    background: $second-color;
+    background: var(--bg-yellow);
 
     &:before {
       content: "\f06a";
-      color: $white-color;
+      color: var(--text-white);
     }
   }
 }
@@ -189,10 +198,10 @@ body {
     border-radius: 5px;
 
     &.btn-blue {
-      background-color: $deepblue;
+      background-color: var(--deepblue);
 
       &:not(:disabled):hover {
-        background-color: darken($deepblue, 10%);
+        background-color: var(--darkened-deepblue);
       }
 
       &:disabled {
@@ -215,7 +224,7 @@ body {
     &.btn-green {
       $bg-color: rgba(0, 210, 83, 0.4);
       background-color: $bg-color;
-      color: $black-color;
+      color: var(--text-black);
 
       &:not(:disabled):hover {
         background-color: darken($bg-color, 15%);
@@ -272,8 +281,8 @@ body {
   /*--------------------------------CONTENT------------------------------*/
   #content {
     padding: 1.5em 3%;
-    box-shadow: $shadow-color 0 5px 10px;
-    background: $white-color;
+    box-shadow: var(--bg-darkened-off-white) 0 5px 10px;
+    background: var(--bg-white);
     overflow: auto;
   }
 
@@ -343,7 +352,7 @@ body {
       display: flex;
       flex-wrap: wrap;
       float: right;
-      background: $primary-neutral-light-color;
+      background: var(--bg-off-white);
       padding: 5px;
       border-radius: 6px;
       text-align: center;
@@ -351,7 +360,7 @@ body {
       a {
         padding: 7px;
         display: inline-block;
-        color: $black-color;
+        color: var(--text-black);
         font-weight: bold;
         margin: 2px;
         flex: 1;
@@ -359,14 +368,14 @@ body {
         white-space: nowrap;
 
         &.selected_tab {
-          background: $primary-color;
-          color: $white-color;
+          background: var(--blue);
+          color: var(--text-white);
           border-radius: 6px;
         }
 
         &:hover {
-          background: $primary-color;
-          color: $white-color;
+          background: var(--blue);
+          color: var(--text-white);
           border-radius: 6px;
         }
       }
@@ -398,28 +407,33 @@ body {
     }
   }
 
-  /* Fontawesome icons */
-  .fa-brands, .fa-link {
+}
+
+/* Fontawesome icons */
+.fa-brands, .fa-link {
   color: black;
-  }
+}
 
-  .fa-facebook {
+.fa-facebook {
   color: $faceblue;
-  }
+}
 
-  .fa-discord {
+.fa-discord {
   color: $discordblurple;
-  }
+}
 
-  .fa-square-instagram::before, .fa-instagram::before {
+.fa-square-instagram::before, .fa-instagram::before {
   background: $instagradient;
   background-clip: text;
   -webkit-text-fill-color: transparent;
-  }
+}
 
-  .fa-bluesky, .fa-square-bluesky {
+.fa-bluesky, .fa-square-bluesky {
   color: #0f73ff;
-  }
+}
+
+.fa-github {
+  color: $githubblack;
 }
 
 @media screen and (max-width: $small-devices) {
@@ -481,16 +495,6 @@ dt {
   margin-top: 25px;
 }
 
-.edit-bar {
-  display: block;
-  margin: 4px;
-
-  a {
-    display: inline-block;
-    margin: 4px;
-  }
-}
-
 .important {
   font-size: 1.2em;
   font-weight: bold;
@@ -503,7 +507,6 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
   border-radius: 5px;
-  -moz-border-radius: 5px;
   overflow: hidden;
   box-shadow: rgba(60, 64, 67, 0.3) 0 1px 3px 0,
               rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
@@ -515,25 +518,21 @@ table {
   }
 }
 
-th {
-  padding: 4px;
-}
-
 td,
 th {
   vertical-align: middle;
   text-align: center;
   padding: 5px 10px;
 
-  >input[type="checkbox"] {
+  > input[type="checkbox"] {
     padding: unset;
   }
 
-  >ul {
+  > ul {
     margin-top: 0;
   }
 
-  >input[type="checkbox"] {
+  > input[type="checkbox"] {
     padding: unset;
   }
 }
@@ -543,10 +542,6 @@ td {
   border-collapse: collapse;
   overflow: hidden;
   text-overflow: ellipsis;
-
-  >ul {
-    margin-top: 0;
-  }
 }
 
 th,
@@ -556,23 +551,23 @@ thead td {
 }
 
 thead {
-  background-color: $deepblue;
+  background-color: var(--deepblue);
   color: white;
 }
 
-tbody>tr {
+tbody > tr {
   &:nth-child(even):not(.highlight) {
-    background: $primary-neutral-light-color;
+    background: var(--bg-off-white);
   }
 
   &.clickable:hover {
     cursor: pointer;
-    background: $secondary-neutral-light-color;
+    background: var(--bg-lightgrey);
     width: 100%;
   }
 
   &.highlight {
-    color: $primary-dark-color;
+    color: var(--lightblue);
     font-style: italic;
   }
 }
@@ -598,7 +593,7 @@ em {
 }
 
 .highlight {
-  background: $second-color;
+  background: var(--bg-yellow);
   font-weight: bold;
 }
 
@@ -700,15 +695,15 @@ u,
     height: 18em;
     overflow: hidden;
     border: 1px solid black;
-    box-shadow: $shadow-color 1px 1px 1px;
+    box-shadow: var(--bg-darkened-off-white) 1px 1px 1px;
 
     &:hover {
-      box-shadow: 1px 1px 5px $second-color;
+      box-shadow: 1px 1px 5px var(--bg-yellow);
     }
   }
 
   .matmat_user a {
-    color: $primary-neutral-dark-color;
+    color: var(--deepblue);
     height: 100%;
     width: 100%;
     margin: 0;
@@ -723,7 +718,6 @@ u,
   display: block;
   margin: 10px;
   padding: 10px;
-  background: $white-color;
 }
 
 textarea {
@@ -731,43 +725,7 @@ textarea {
   margin-top: 10px;
 }
 
-
-
-.ui-dialog .ui-dialog-buttonpane {
-  bottom: 0;
-  position: absolute;
-  width: 97%;
-}
-
 #cash_summary_form label,
 .inline {
   display: inline;
 }
-
-.form_button {
-  width: 150px;
-  height: 120px;
-  padding: 2px;
-  display: inline-block;
-  font-size: 0.8em;
-
-  span {
-    width: 70px;
-    float: right;
-  }
-
-  img {
-    max-width: 50px;
-    max-height: 50px;
-    float: left;
-  }
-
-  strong {
-    font-weight: bold;
-    font-size: 1.2em;
-  }
-
-  button {
-    vertical-align: middle;
-  }
-}

core/static/user/user_detail.scss

@@ -71,7 +71,7 @@ main {
         border-radius: 50%;
         justify-content: center;
         align-items: center;
-        background-color: $primary-neutral-light-color;
+        background-color: var(--bg-white);
 
         > span {
           font-size: small;

core/static/user/user_godfathers.scss

@@ -62,7 +62,7 @@
         }
 
         &:enabled>.fa {
-          background-color: #354a5f;
+          background-color: var(--deepblue);
           color: white;
         }
 

core/templates/core/base.jinja

@@ -23,7 +23,6 @@
         <meta property="og:image" content="{{ request.build_absolute_uri(static("core/img/logo_no_text.png")) }}" />
       {% endblock %}
       <link rel="shortcut icon" href="{{ static('core/img/favicon.ico') }}">
-      <link rel="stylesheet" href="{{ static('core/base.css') }}">
       <link rel="stylesheet" href="{{ static('core/style.scss') }}">
       <link rel="stylesheet" href="{{ static('core/tooltips.scss') }}">
       <link rel="stylesheet" href="{{ static('core/markdown.scss') }}">

core/templates/core/macros.jinja

@@ -102,6 +102,7 @@
       @click.prevent="{{ page }}--"
       :disabled="{{ page }} <= 1"
       @keyup.right.window="{{ page }} = Math.min({{ nb_pages }}, {{ page }} + 1)"
+      class="pagination-arrow"
     >
       <i class="fa fa-caret-left"></i>
     </button>
@@ -112,6 +113,7 @@
       @click.prevent="{{ page }}++"
       :disabled="{{ page }} >= {{ nb_pages }}"
       @keyup.left.window="{{ page }} = Math.max(1, {{ page }} - 1)"
+      class="pagination-arrow"
     >
       <i class="fa fa-caret-right"></i>
     </button>
@@ -163,12 +165,14 @@
           href="?{{ querystring(request, page=current_page.previous_page_number()) }}"
         {%- endif -%}
       >
-        <button>
+        <button class="pagination-arrow">
           <i class="fa fa-caret-left"></i>
         </button>
       </a>
     {% else %}
-      <button disabled="disabled"><i class="fa fa-caret-left"></i></button>
+      <button disabled="disabled" class="pagination-arrow">
+        <i class="fa fa-caret-left"></i>
+      </button>
     {% endif %}
     {% for i in paginator.get_elided_page_range(current_page.number) %}
       {% if i == current_page.number %}
@@ -201,12 +205,14 @@
         {%- else -%}
           href="?{{querystring(request, page=current_page.next_page_number())}}"
         {%- endif -%}
-      ><button>
+      ><button class="pagination-arrow">
         <i class="fa fa-caret-right"></i>
       </button>
       </a>
     {% else %}
-      <button disabled="disabled"><i class="fa fa-caret-right"></i></button>
+      <button disabled="disabled" class="pagination-arrow">
+        <i class="fa fa-caret-right"></i>
+      </button>
     {% endif %}
   </nav>
 {% endmacro %}

counter/static/counter/css/counter-click.scss

@@ -71,7 +71,7 @@
   padding: 0.5em;
   margin: 0.2em;
   height: 100%;
-  background: $secondary-neutral-light-color;
+  background: var(--bg-off-white);
 
   img {
     max-width: 70%;

eboutic/static/eboutic/css/eboutic.scss

@@ -67,7 +67,7 @@
   .fa-plus,
   .fa-minus {
     cursor: pointer;
-    background-color: #354a5f;
+    background-color: var(--deepblue);
     color: white;
     border-radius: 50%;
     padding: 5px;

election/static/election/css/election.scss

@@ -288,7 +288,7 @@ $min_col_width: 100px;
     border: none;
     color: black;
     text-decoration: none;
-    background-color: $primary-neutral-light-color;
+    background-color: var(--bg-white);
     padding: 0.4em;
     margin: 0.1em;
     font-size: 1.18em;

forum/static/forum/css/forum.scss

@@ -13,7 +13,8 @@
   }
 
   .topic {
-    border: solid $primary-neutral-color 1px;
+    border: solid var(--darkened-deepblue) 1px;
+    border-radius: 5px;
     padding: 1px;
     margin: 1px;
 
@@ -23,7 +24,7 @@
     }
 
     a {
-      color: $black-color;
+      color: var(--text-black);
     }
 
     a:hover {
@@ -56,7 +57,7 @@
   }
 
   .forum {
-    background: $primary-neutral-light-color;
+    background: var(--bg-white);
     padding: 1px;
     margin: 1px;
 
@@ -66,7 +67,7 @@
     }
 
     a {
-      color: $black-color;
+      color: var(--text-black);
     }
     a:hover {
       text-decoration: underline;
@@ -91,7 +92,7 @@
 
   .category {
     margin-top: 5px;
-    background: $secondary-color;
+    background: var(--deepblue);
     color: white;
     border-radius: 10px 10px 0 0;
     .title {
@@ -105,12 +106,12 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
-    background: $secondary-neutral-light-color;
+    background: var(--bg-off-white);
     border-radius: 5px;
-    border: 1px darken($secondary-neutral-light-color, 10%) solid;
+    border: 1px var(--bg-lightgrey) solid;
 
     &:nth-child(odd) {
-      background: $primary-neutral-light-color;
+      background: var(--bg-white);
     }
 
     .message-header {

locale/fr/LC_MESSAGES/django.po

@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2026-10-15 14:50+0200\n"
+"POT-Creation-Date: 2026-10-09 21:44+0200\n"
 "PO-Revision-Date: 2016-07-18\n"
 "Last-Translator: Maréchal <thomas.girod@utbm.fr\n"
 "Language-Team: AE info <ae.info@utbm.fr>\n"
@@ -517,22 +517,6 @@ msgstr "Url dupliquée"
 msgid "This link doesn't match with the url base of its type."
 msgstr "Ce lien ne correspond pas à l'url de base de son type."
 
-#: club/templates/club/club_detail.jinja club/views.py
-#: com/templates/com/news_admin_list.jinja com/templates/com/poster_list.jinja
-#: com/templates/com/screen_list.jinja com/templates/com/weekmail.jinja
-#: core/templates/core/file.jinja core/templates/core/group_list.jinja
-#: core/templates/core/page/base.jinja core/templates/core/user_tools.jinja
-#: core/views/user.py counter/templates/counter/cash_summary_list.jinja
-#: counter/templates/counter/counter_list.jinja
-#: election/templates/election/election_detail.jinja
-#: forum/templates/forum/macros.jinja
-#: pedagogy/templates/pedagogy/fragments/ue_detail/comments.jinja
-#: pedagogy/templates/pedagogy/guide.jinja sas/templates/sas/album.jinja
-#: trombi/templates/trombi/detail.jinja
-#: trombi/templates/trombi/edit_profile.jinja
-msgid "Edit"
-msgstr "Éditer"
-
 #: club/templates/club/club_detail.jinja com/templates/com/news_list.jinja
 msgid "Links"
 msgstr "Liens"
@@ -1035,6 +1019,26 @@ msgstr "Historique"
 msgid "Tools"
 msgstr "Outils"
 
+#: club/views.py com/templates/com/news_admin_list.jinja
+#: com/templates/com/poster_list.jinja com/templates/com/screen_list.jinja
+#: com/templates/com/weekmail.jinja core/templates/core/file.jinja
+#: core/templates/core/group_list.jinja core/templates/core/page/base.jinja
+#: core/templates/core/user_tools.jinja core/views/user.py
+#: counter/templates/counter/cash_summary_list.jinja
+#: counter/templates/counter/counter_list.jinja
+#: election/templates/election/election_detail.jinja
+#: forum/templates/forum/macros.jinja
+#: pedagogy/templates/pedagogy/fragments/ue_detail/comments.jinja
+#: pedagogy/templates/pedagogy/guide.jinja sas/templates/sas/album.jinja
+#: trombi/templates/trombi/detail.jinja
+#: trombi/templates/trombi/edit_profile.jinja
+msgid "Edit"
+msgstr "Éditer"
+
+#: club/views.py
+msgid "Edit club page"
+msgstr "Éditer la page de club"
+
 #: club/views.py
 msgid "Sellings"
 msgstr "Vente"

pedagogy/static/pedagogy/css/pedagogy.scss

@@ -23,7 +23,6 @@ $pedagogy-white-text: #f0f0f0;
     overflow-wrap: break-word;
 
     .closed td.title {
-      color: lighten($black-color, 10%);
       font-style: italic;
     }
 
@@ -69,9 +68,6 @@ $pedagogy-white-text: #f0f0f0;
       min-width: 300px;
     }
     .info-container {
-      // Darken the background color just enough to make this part
-      // stand out a little, while not being too perceptible
-      background: darken($white-color, 1%);
       display: grid;
       grid-template-columns: 1fr 1fr;
       border-radius: 5px;
@@ -158,9 +154,9 @@ $pedagogy-white-text: #f0f0f0;
       display: flex;
       flex-direction: column;
       gap: 10px;
-      background: $primary-neutral-light-color;
+      background: var(--bg-off-white);
       border-radius: 5px;
-      border: 1px darken($secondary-neutral-light-color, 10%) solid;
+      border: 1px var(--bg-lightgrey) solid;
 
       &.reported {
         border: #fc8181 1px solid;

sas/static/sas/css/album.scss

@@ -27,7 +27,7 @@ main {
     font-size: 1.2em;
     line-height: 1.2em;
     color: black;
-    background-color: $primary-neutral-light-color;
+    background-color: var(--bg-white);
     border-radius: 5px;
     font-weight: bold;
 
@@ -36,7 +36,7 @@ main {
     }
 
     &:disabled {
-      background-color: $primary-neutral-light-color;
+      background-color: var(--bg-white);
       color: #d4d4d4;
     }
   }

sas/static/sas/css/picture.scss

@@ -239,7 +239,7 @@
   >.tools {
     flex: 1;
     .btn {
-      background-color: $primary-neutral-light-color;
+      background-color: var(--bg-white);
       display: flex;
       justify-content: center;
       align-items: center;

timetable/static/timetable/css/generator.scss

@@ -6,7 +6,7 @@
   display: block;
   margin: 2em auto;
   .header {
-    background-color: $white-color;
+    background-color: var(--bg-white);
     font-weight: bold;
     box-shadow: none;
     width: calc(100% - var(--hour-side-width) - 10px);