move the club page edit link to the club main page

club/templates/club/club_detail.jinja

@@ -26,6 +26,15 @@
 {% 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,20 +106,19 @@ 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(
+                "url": reverse("club:club_members", kwargs={"club_id": self.object.id}),
-                            "club:club_members", kwargs={"club_id": self.object.id}
-                        ),
                 "slug": "members",
                 "name": _("Members"),
             },
@@ -130,18 +129,12 @@ class ClubTabsMixin(TabedViewMixin):
                 "slug": "elderlies",
                 "name": _("Old members"),
             },
-                ]
-            )
-            if self.object.page:
-                tab_list.append(
             {
-                        "url": reverse(
+                "url": reverse("club:club_hist", kwargs={"club_id": self.object.id}),
-                            "club:club_hist", kwargs={"club_id": self.object.id}
-                        ),
                 "slug": "history",
                 "name": _("History"),
-                    }
+            },
-                )
+        ]
         if self.request.user.can_edit(self.object):
             tab_list.extend(
                 [
@@ -159,21 +152,6 @@ 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,6 +5,7 @@
   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: var(--bg-yellow);
+    background: lighten($second-color, 5%);
     box-shadow: var(--box-shadow);
     padding: .75rem;
     margin: 0 0 0.5em 0;
@@ -85,7 +85,7 @@
 
     #links_content {
       overflow: auto;
-      box-shadow: var(--bg-darkened-off-white) 1px 1px 1px;
+      box-shadow: $shadow-color 1px 1px 1px;
       min-height: 20em;
       padding: 1em;
 
@@ -111,7 +111,7 @@
     }
 
     #birthdays_content {
-      box-shadow: var(--bg-darkened-off-white) 1px 1px 1px;
+      box-shadow: $shadow-color 1px 1px 1px;
       padding: 1em;
 
       ul.birthdays_year {
@@ -123,7 +123,7 @@
           padding: 0.5em;
 
           &:nth-child(even) {
-            background: var(--bg-off-white);
+            background: $secondary-neutral-light-color;
           }
         }
 
@@ -141,7 +141,7 @@
 
   /* EVENTS TODAY AND NEXT FEW DAYS */
   .news_events_group {
-    box-shadow: var(--bg-darkened-off-white) 1px 1px 1px;
+    box-shadow: $shadow-color 1px 1px 1px;
     margin-left: 0;
     margin-bottom: 0.5em;
 
@@ -153,8 +153,8 @@
       display: table-cell;
       padding: 0.6em;
       vertical-align: middle;
-      background: var(--deepblue);
+      background: $primary-neutral-dark-color;
-      color: var(--text-white);
+      color: $white-color;
       text-transform: uppercase;
       text-align: center;
       font-weight: bold;
@@ -180,7 +180,7 @@
       }
 
       .news_event:nth-of-type(even) {
-        background: var(--bg-white);
+        background: $primary-neutral-light-color;
       }
 
       .news_event {

core/static/core/base.css

@@ -0,0 +1,123 @@
+/*--------------------------------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,37 +1,41 @@
-/**
+$first-color: hsl(220, 100%, 50%);
- * Sith theme variables
+$second-color: hsl(48, 100%, 67%);
- */
+$primary-color: hsl(219.9, 53.7%, 50%);
-:root {
+$secondary-color: hsl(204, 64%, 44%);
-  --bg-yellow: #ffe270;
+$primary-color-text: hsl(0, 0%, 100%);
-  --bg-white: #f9fafb;
+$secondary-color-text: hsla(0, 0%, 0%, 0.87);
-  --bg-off-white: #f0f0f0;
-  --bg-darkened-off-white: #e3e3e3;
-  --bg-lightgrey: #d4d4d4;
 
-  --text-white: #f9fafb;
+$primary-light-color: hsl(219.8, 46.4%, 64.9%);
-  --text-black: #2b2b2b;
+$primary-dark-color: hsl(203, 75%, 40%);
-  --text-red: #eb2f06;
 
-  --blue: #3b69c4;
+$secondary-light-color: hsl(40, 68%, 65%);
-  --lightblue: #1a78b3;
+$secondary-dark-color: hsl(40, 68%, 35%);
-  // darkened-deepblue is 10% darker than deepblue
+
-  // This is explicitely declared, because the `darken` scss function
+$primary-neutral-color: hsl(219.6, 20.8%, 50%);
-  // isn't called at compile-time somehow.
+$primary-neutral-light-color: hsl(0, 0%, 94%);
-  --deepblue: #354a5f;
+$primary-neutral-dark-color: hsl(210, 29%, 29%);
-  --darkened-deepblue: #23313e;
+
-}
+$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;
 
-/**
- * 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: var(--bg-off-white);
+  background-color: $primary-neutral-light-color;
   border-radius: 5px;
   position: relative;
   box-sizing: border-box;
@@ -30,12 +30,12 @@
   gap: 20px;
 
   &:disabled {
-    background-color: var(--bg-darkened-off-white);
+    background-color: darken($primary-neutral-light-color, 5%);
     opacity: 65%;
   }
 
   &.clickable:not(:disabled):hover {
-    background-color: var(--bg-darkened-off-white);
+    background-color: darken($primary-neutral-light-color, 5%);
   }
 
   &.selected {

core/static/core/components/tabs.scss

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

core/static/core/footer.scss

@@ -2,75 +2,92 @@
 @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: var(--deepblue);
+    background-color: $primary-neutral-dark-color;
 
     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: var(--text-white);
+      color: $white-color;
+      width: auto;
 
       &:hover {
-        text-shadow: 0.5px 0.5px 0.5px var(--bg-darkened-off-white);
+        color: $white-color;
+        text-shadow: 0.5px 0.5px 0.5px $shadow-color;
       }
     }
 
     .fa-github {
-      color: var(--text-white);
+      color: $white-color;
     }
 
     hr {
-      border-top: var(--bg-white) 1px solid;
+      width: 100%;
+      height: 0px;
+      border: none;
+      border-top: 0.5px solid $white-color;
     }
   }
 
-
   @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: var(--deepblue);
+      background-color: $primary-neutral-dark-color;
+      box-shadow: $shadow-color 0 0 15px;
 
       a {
+        color: $white-color;
+        width: auto;
         padding: 0.8em;
         flex: 1;
         font-weight: bold;
-        color: var(--text-white);
 
         &:hover {
-          text-shadow: 0.5px 0.5px 0.5px var(--bg-darkened-off-white);
+          color: $white-color;
+          text-shadow: 0.5px 0.5px 0.5px $shadow-color;
         }
       }
     }
+
+    .fa-github {
+      color: $githubblack;
+    }
+
+    hr {
+      border: none;
+      height: 5px;
+    }
   }
 }

core/static/core/forms.scss

@@ -16,6 +16,7 @@
   input[type="file"] {
     border: none;
     text-decoration: none;
+    background-color: $background-button-color;
     padding: 0.4em;
     margin: 0.1em;
     font-size: 1.2em;
@@ -23,7 +24,7 @@
     color: black;
 
     &:not(.link-like):not(:disabled):hover {
-      background: var(--bg-lightgrey);
+      background: hsl(0, 0%, 83%);
     }
   }
 
@@ -52,7 +53,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;
@@ -63,7 +64,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;
@@ -74,7 +75,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;
@@ -82,14 +83,14 @@
 
   a:not(.button) {
     text-decoration: none;
-    color: var(--lightblue);
+    color: $primary-dark-color;
 
     &:hover {
-      color: var(--blue);
+      color: $primary-light-color;
     }
 
     &:active {
-      color: var(--blue);
+      color: $primary-color;
     }
   }
 }
@@ -761,13 +762,16 @@ form {
   // a submit input that should look like a regular <a>
   input[type="submit"], button {
     &.link-like {
-      color: var(--lightblue);
+      color: $primary-dark-color;
       &:hover {
-        color: var(--blue);
+        color: $primary-light-color;
       }
 
       &.link-red {
-        color: var(--text-red);
+        color: $red-text-color;
+        &:hover {
+          color: $hovered-red-text-color;
+        }
       }
       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: var(--deepblue);
+  background-color: $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: var(--deepblue);
+        background-color: $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: var(--deepblue);
+          background-color: $deepblue;
         }
 
         >.options {
@@ -298,7 +298,7 @@ $background-color-hovered: #283747;
             width: 10px;
             height: 10px;
             padding: 5px;
-            background-color: var(--text-red);
+            background-color: $red-text-color;
             border-radius: 50%;
             position: absolute;
             top: -50%;

core/static/core/markdown.scss

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

core/static/core/navbar.scss

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

core/static/core/pagination.scss

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

core/static/core/style.scss

@@ -2,21 +2,12 @@
 @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] {
@@ -66,7 +57,7 @@ body {
 
   .collapse-header {
     color: white;
-    background-color: var(--deepblue);
+    background-color: $deepblue;
     padding: 5px 10px;
     display: flex;
     align-items: center;
@@ -150,7 +141,7 @@ body {
   }
 
   #info_box {
-    background: var(--bg-off-white);
+    background: $primary-neutral-light-color;
 
     &:before {
       content: "\f05a";
@@ -159,11 +150,11 @@ body {
   }
 
   #alert_box {
-    background: var(--bg-yellow);
+    background: $second-color;
 
     &:before {
       content: "\f06a";
-      color: var(--text-white);
+      color: $white-color;
     }
   }
 }
@@ -198,10 +189,10 @@ body {
     border-radius: 5px;
 
     &.btn-blue {
-      background-color: var(--deepblue);
+      background-color: $deepblue;
 
       &:not(:disabled):hover {
-        background-color: var(--darkened-deepblue);
+        background-color: darken($deepblue, 10%);
       }
 
       &:disabled {
@@ -224,7 +215,7 @@ body {
     &.btn-green {
       $bg-color: rgba(0, 210, 83, 0.4);
       background-color: $bg-color;
-      color: var(--text-black);
+      color: $black-color;
 
       &:not(:disabled):hover {
         background-color: darken($bg-color, 15%);
@@ -281,8 +272,8 @@ body {
   /*--------------------------------CONTENT------------------------------*/
   #content {
     padding: 1.5em 3%;
-    box-shadow: var(--bg-darkened-off-white) 0 5px 10px;
+    box-shadow: $shadow-color 0 5px 10px;
-    background: var(--bg-white);
+    background: $white-color;
     overflow: auto;
   }
 
@@ -352,7 +343,7 @@ body {
       display: flex;
       flex-wrap: wrap;
       float: right;
-      background: var(--bg-off-white);
+      background: $primary-neutral-light-color;
       padding: 5px;
       border-radius: 6px;
       text-align: center;
@@ -360,7 +351,7 @@ body {
       a {
         padding: 7px;
         display: inline-block;
-        color: var(--text-black);
+        color: $black-color;
         font-weight: bold;
         margin: 2px;
         flex: 1;
@@ -368,14 +359,14 @@ body {
         white-space: nowrap;
 
         &.selected_tab {
-          background: var(--blue);
+          background: $primary-color;
-          color: var(--text-white);
+          color: $white-color;
           border-radius: 6px;
         }
 
         &:hover {
-          background: var(--blue);
+          background: $primary-color;
-          color: var(--text-white);
+          color: $white-color;
           border-radius: 6px;
         }
       }
@@ -407,33 +398,28 @@ 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) {
@@ -495,6 +481,16 @@ dt {
   margin-top: 25px;
 }
 
+.edit-bar {
+  display: block;
+  margin: 4px;
+
+  a {
+    display: inline-block;
+    margin: 4px;
+  }
+}
+
 .important {
   font-size: 1.2em;
   font-weight: bold;
@@ -507,6 +503,7 @@ 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;
@@ -518,21 +515,25 @@ 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;
   }
 }
@@ -542,6 +543,10 @@ td {
   border-collapse: collapse;
   overflow: hidden;
   text-overflow: ellipsis;
+
+  >ul {
+    margin-top: 0;
+  }
 }
 
 th,
@@ -551,23 +556,23 @@ thead td {
 }
 
 thead {
-  background-color: var(--deepblue);
+  background-color: $deepblue;
   color: white;
 }
 
-tbody > tr {
+tbody>tr {
   &:nth-child(even):not(.highlight) {
-    background: var(--bg-off-white);
+    background: $primary-neutral-light-color;
   }
 
   &.clickable:hover {
     cursor: pointer;
-    background: var(--bg-lightgrey);
+    background: $secondary-neutral-light-color;
     width: 100%;
   }
 
   &.highlight {
-    color: var(--lightblue);
+    color: $primary-dark-color;
     font-style: italic;
   }
 }
@@ -593,7 +598,7 @@ em {
 }
 
 .highlight {
-  background: var(--bg-yellow);
+  background: $second-color;
   font-weight: bold;
 }
 
@@ -695,15 +700,15 @@ u,
     height: 18em;
     overflow: hidden;
     border: 1px solid black;
-    box-shadow: var(--bg-darkened-off-white) 1px 1px 1px;
+    box-shadow: $shadow-color 1px 1px 1px;
 
     &:hover {
-      box-shadow: 1px 1px 5px var(--bg-yellow);
+      box-shadow: 1px 1px 5px $second-color;
     }
   }
 
   .matmat_user a {
-    color: var(--deepblue);
+    color: $primary-neutral-dark-color;
     height: 100%;
     width: 100%;
     margin: 0;
@@ -718,6 +723,7 @@ u,
   display: block;
   margin: 10px;
   padding: 10px;
+  background: $white-color;
 }
 
 textarea {
@@ -725,7 +731,43 @@ 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: var(--bg-white);
+        background-color: $primary-neutral-light-color;
 
         > span {
           font-size: small;

core/static/user/user_godfathers.scss

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

core/templates/core/base.jinja

@@ -23,6 +23,7 @@
         <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,7 +102,6 @@
       @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>
@@ -113,7 +112,6 @@
       @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>
@@ -165,14 +163,12 @@
           href="?{{ querystring(request, page=current_page.previous_page_number()) }}"
         {%- endif -%}
       >
-        <button class="pagination-arrow">
+        <button>
           <i class="fa fa-caret-left"></i>
         </button>
       </a>
     {% else %}
-      <button disabled="disabled" class="pagination-arrow">
+      <button disabled="disabled"><i class="fa fa-caret-left"></i></button>
-        <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 %}
@@ -205,14 +201,12 @@
         {%- else -%}
           href="?{{querystring(request, page=current_page.next_page_number())}}"
         {%- endif -%}
-      ><button class="pagination-arrow">
+      ><button>
         <i class="fa fa-caret-right"></i>
       </button>
       </a>
     {% else %}
-      <button disabled="disabled" class="pagination-arrow">
+      <button disabled="disabled"><i class="fa fa-caret-right"></i></button>
-        <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: var(--bg-off-white);
+  background: $secondary-neutral-light-color;
 
   img {
     max-width: 70%;

eboutic/static/eboutic/css/eboutic.scss

@@ -67,7 +67,7 @@
   .fa-plus,
   .fa-minus {
     cursor: pointer;
-    background-color: var(--deepblue);
+    background-color: #354a5f;
     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: var(--bg-white);
+    background-color: $primary-neutral-light-color;
     padding: 0.4em;
     margin: 0.1em;
     font-size: 1.18em;

forum/static/forum/css/forum.scss

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

locale/fr/LC_MESSAGES/django.po

@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2026-10-09 21:44+0200\n"
+"POT-Creation-Date: 2026-10-15 14:50+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,6 +517,22 @@ 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"
@@ -1019,26 +1035,6 @@ 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,6 +23,7 @@ $pedagogy-white-text: #f0f0f0;
     overflow-wrap: break-word;
 
     .closed td.title {
+      color: lighten($black-color, 10%);
       font-style: italic;
     }
 
@@ -68,6 +69,9 @@ $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;
@@ -154,9 +158,9 @@ $pedagogy-white-text: #f0f0f0;
       display: flex;
       flex-direction: column;
       gap: 10px;
-      background: var(--bg-off-white);
+      background: $primary-neutral-light-color;
       border-radius: 5px;
-      border: 1px var(--bg-lightgrey) solid;
+      border: 1px darken($secondary-neutral-light-color, 10%) 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: var(--bg-white);
+    background-color: $primary-neutral-light-color;
     border-radius: 5px;
     font-weight: bold;
 
@@ -36,7 +36,7 @@ main {
     }
 
     &:disabled {
-      background-color: var(--bg-white);
+      background-color: $primary-neutral-light-color;
       color: #d4d4d4;
     }
   }

sas/static/sas/css/picture.scss

@@ -239,7 +239,7 @@
   >.tools {
     flex: 1;
     .btn {
-      background-color: var(--bg-white);
+      background-color: $primary-neutral-light-color;
       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: var(--bg-white);
+    background-color: $white-color;
     font-weight: bold;
     box-shadow: none;
     width: calc(100% - var(--hour-side-width) - 10px);