diff --git a/com/static/com/css/news-detail.scss b/com/static/com/css/news-detail.scss
index c0d633fb..6f2b9944 100644
--- a/com/static/com/css/news-detail.scss
+++ b/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;
diff --git a/com/static/com/css/news-list.scss b/com/static/com/css/news-list.scss
index e53fbc5c..f8f8d79e 100644
--- a/com/static/com/css/news-list.scss
+++ b/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 {
diff --git a/core/static/core/colors.scss b/core/static/core/colors.scss
index 52f6fa55..abbc0e9f 100644
--- a/core/static/core/colors.scss
+++ b/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;
}
\ No newline at end of file
diff --git a/core/static/core/components/card.scss b/core/static/core/components/card.scss
index 2fe346a2..602ab3f3 100644
--- a/core/static/core/components/card.scss
+++ b/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 {
diff --git a/core/static/core/components/tabs.scss b/core/static/core/components/tabs.scss
index e8665967..c44dec96 100644
--- a/core/static/core/components/tabs.scss
+++ b/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);
}
}
}
diff --git a/core/static/core/footer.scss b/core/static/core/footer.scss
index aa2e048f..d8d976a3 100644
--- a/core/static/core/footer.scss
+++ b/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);
}
}
}
diff --git a/core/static/core/forms.scss b/core/static/core/forms.scss
index 511190b6..718a2f84 100644
--- a/core/static/core/forms.scss
+++ b/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
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%;
diff --git a/core/static/core/header.scss b/core/static/core/header.scss
index e935a27b..95409c2b 100644
--- a/core/static/core/header.scss
+++ b/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%;
diff --git a/core/static/core/markdown.scss b/core/static/core/markdown.scss
index 098d86be..ae265759 100644
--- a/core/static/core/markdown.scss
+++ b/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;
}
diff --git a/core/static/core/navbar.scss b/core/static/core/navbar.scss
index 9b77bf77..810b113a 100644
--- a/core/static/core/navbar.scss
+++ b/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;
diff --git a/core/static/core/pagination.scss b/core/static/core/pagination.scss
index 911018a4..958a11d3 100644
--- a/core/static/core/pagination.scss
+++ b/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
diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index 2a1857b1..a69d7264 100644
--- a/core/static/core/style.scss
+++ b/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 {
diff --git a/core/static/user/user_detail.scss b/core/static/user/user_detail.scss
index 60985f16..2191b773 100644
--- a/core/static/user/user_detail.scss
+++ b/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;
diff --git a/core/static/user/user_godfathers.scss b/core/static/user/user_godfathers.scss
index d4cdd304..a9a665f3 100644
--- a/core/static/user/user_godfathers.scss
+++ b/core/static/user/user_godfathers.scss
@@ -62,7 +62,7 @@
}
&:enabled>.fa {
- background-color: #354a5f;
+ background-color: var(--deepblue);
color: white;
}
diff --git a/core/templates/core/macros.jinja b/core/templates/core/macros.jinja
index 303c670e..0f6bb9cf 100644
--- a/core/templates/core/macros.jinja
+++ b/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"
>
@@ -112,6 +113,7 @@
@click.prevent="{{ page }}++"
:disabled="{{ page }} >= {{ nb_pages }}"
@keyup.left.window="{{ page }} = Math.max(1, {{ page }} - 1)"
+ class="pagination-arrow"
>
@@ -163,12 +165,14 @@
href="?{{ querystring(request, page=current_page.previous_page_number()) }}"
{%- endif -%}
>
-
{% else %}
-
+
{% 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 -%}
- >