From b8ef4e2fdc988f749934f4a478910c4ca766237c Mon Sep 17 00:00:00 2001 From: imperosol Date: Wed, 14 Oct 2026 13:45:18 +0200 Subject: [PATCH] style: replace scss variable by css ones --- com/static/com/css/news-detail.scss | 1 - com/static/com/css/news-list.scss | 16 +++---- core/static/core/colors.scss | 44 ++++++++++------- core/static/core/components/card.scss | 6 +-- core/static/core/components/tabs.scss | 12 +++-- core/static/core/footer.scss | 24 +++++----- core/static/core/forms.scss | 24 ++++------ core/static/core/header.scss | 8 ++-- core/static/core/markdown.scss | 7 +-- core/static/core/navbar.scss | 2 +- core/static/core/pagination.scss | 14 ++---- core/static/core/style.scss | 47 +++++++++---------- core/static/user/user_detail.scss | 2 +- core/static/user/user_godfathers.scss | 2 +- core/templates/core/macros.jinja | 14 ++++-- counter/static/counter/css/counter-click.scss | 2 +- eboutic/static/eboutic/css/eboutic.scss | 2 +- election/static/election/css/election.scss | 2 +- forum/static/forum/css/forum.scss | 17 +++---- pedagogy/static/pedagogy/css/pedagogy.scss | 8 +--- sas/static/sas/css/album.scss | 4 +- sas/static/sas/css/picture.scss | 2 +- timetable/static/timetable/css/generator.scss | 2 +- 23 files changed, 130 insertions(+), 132 deletions(-) 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 -%} - > {% else %} - + {% endif %} {% endmacro %} diff --git a/counter/static/counter/css/counter-click.scss b/counter/static/counter/css/counter-click.scss index 64645cde..6098f182 100644 --- a/counter/static/counter/css/counter-click.scss +++ b/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%; diff --git a/eboutic/static/eboutic/css/eboutic.scss b/eboutic/static/eboutic/css/eboutic.scss index 1e5ffa71..abb0ca30 100644 --- a/eboutic/static/eboutic/css/eboutic.scss +++ b/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; diff --git a/election/static/election/css/election.scss b/election/static/election/css/election.scss index 3f12ebc1..8a1ac20b 100644 --- a/election/static/election/css/election.scss +++ b/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; diff --git a/forum/static/forum/css/forum.scss b/forum/static/forum/css/forum.scss index a618cf33..d9fd14e1 100644 --- a/forum/static/forum/css/forum.scss +++ b/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 { diff --git a/pedagogy/static/pedagogy/css/pedagogy.scss b/pedagogy/static/pedagogy/css/pedagogy.scss index b7597d17..d4ee7db6 100644 --- a/pedagogy/static/pedagogy/css/pedagogy.scss +++ b/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; diff --git a/sas/static/sas/css/album.scss b/sas/static/sas/css/album.scss index cec61de8..539c7d67 100644 --- a/sas/static/sas/css/album.scss +++ b/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; } } diff --git a/sas/static/sas/css/picture.scss b/sas/static/sas/css/picture.scss index d22a4441..550947bc 100644 --- a/sas/static/sas/css/picture.scss +++ b/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; diff --git a/timetable/static/timetable/css/generator.scss b/timetable/static/timetable/css/generator.scss index 758892de..589c720d 100644 --- a/timetable/static/timetable/css/generator.scss +++ b/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);