style: replace scss variable by css ones

core/static/core/colors.scss

@@ -1,30 +1,38 @@
-$primary-color: hsl(219.9, 53.7%, 50%);
-$primary-light-color: hsl(219.8, 46.4%, 64.9%);
+/**
+ * Sith theme variables
+ */
+:root {
+  --bg-yellow: #ffe270;
+  --bg-white: #f9fafb;
+  --bg-off-white: #f0f0f0;
+  --bg-darkened-off-white: #e3e3e3;
+  --bg-lightgrey: #d4d4d4;
 
-$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%);
+  --text-white: #f9fafb;
+  --text-black: #2b2b2b;
+  --text-red: #eb2f06;
 
-$secondary-neutral-light-color: hsl(0, 0%, 91%);
-
-$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;
+  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

@@ -9,7 +9,7 @@ footer.bottom-links {
   @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;
@@ -28,24 +28,24 @@ footer.bottom-links {
     }
 
     a {
-      color: $white-color;
+      color: var(--text-white);
       width: auto;
 
       &:hover {
-        color: $white-color;
-        text-shadow: 0.5px 0.5px 0.5px $shadow-color;
+        color: var(--text-white);
+        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;
+      height: 0;
       border: none;
-      border-top: 0.5px solid $white-color;
+      border-top: 0.5px solid var(--bg-white);
     }
   }
 
@@ -59,24 +59,22 @@ footer.bottom-links {
 
     section:first-of-type {
       margin: 0.6em 0;
-      color: $white-color;
+      color: var(--text-white);
       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);
+      box-shadow: var(--bg-white) 0 0 15px;
 
       a {
-        color: $white-color;
         width: auto;
         padding: 0.8em;
         flex: 1;
         font-weight: bold;
 
         &:hover {
-          color: $white-color;
-          text-shadow: 0.5px 0.5px 0.5px $shadow-color;
+          text-shadow: 0.5px 0.5px 0.5px var(--bg-white);
         }
       }
     }

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

@@ -57,7 +57,7 @@ body {
 
   .collapse-header {
     color: white;
-    background-color: $deepblue;
+    background-color: var(--deepblue);
     padding: 5px 10px;
     display: flex;
     align-items: center;
@@ -141,7 +141,7 @@ body {
   }
 
   #info_box {
-    background: $primary-neutral-light-color;
+    background: var(--bg-off-white);
 
     &:before {
       content: "\f05a";
@@ -150,11 +150,11 @@ body {
   }
 
   #alert_box {
-    background: $second-color;
+    background: var(--bg-yellow);
 
     &:before {
       content: "\f06a";
-      color: $white-color;
+      color: var(--text-white);
     }
   }
 }
@@ -189,10 +189,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 +215,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 +272,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 +343,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 +351,7 @@ body {
       a {
         padding: 7px;
         display: inline-block;
-        color: $black-color;
+        color: var(--text-black);
         font-weight: bold;
         margin: 2px;
         flex: 1;
@@ -359,14 +359,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;
         }
       }
@@ -556,23 +556,23 @@ thead td {
 }
 
 thead {
-  background-color: $deepblue;
+  background-color: var(--deepblue);
   color: white;
 }
 
 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 +598,7 @@ em {
 }
 
 .highlight {
-  background: $second-color;
+  background: var(--bg-yellow);
   font-weight: bold;
 }
 
@@ -700,15 +700,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 +723,6 @@ u,
   display: block;
   margin: 10px;
   padding: 10px;
-  background: $white-color;
 }
 
 textarea {

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/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 %}