diff --git a/website/announcements/static/announcements/css/style.scss b/website/announcements/static/announcements/css/style.scss index 708137fec942d2d28885f9733da5530926455d57..02c9708ed09523ca97b29a954673edafb6ac9aa5 100644 --- a/website/announcements/static/announcements/css/style.scss +++ b/website/announcements/static/announcements/css/style.scss @@ -1,30 +1,30 @@ #announcements-alerts { .announcement { background: $preset; - color: $white; + color: $preset-contrast; text-align: center; padding: 0.5rem 1rem; position: relative; .close { - color: $white; + color: $preset-contrast; } p { display: inline; margin-left: 0.5rem; - color: $white; + color: $preset-contrast; font-size: 0.9rem; font-weight: $bold; } a { - color: $white; + color: $preset-contrast; text-decoration: underline; } a:hover { - color: $light-grey; + color: $preset-contrast-hover; } button { diff --git a/website/events/api/serializers.py b/website/events/api/serializers.py index 63d5650f60efbd9e47c13cac34550e333e49660f..e6e36359816116b60c3d53ae179fcfe05bac70e6 100644 --- a/website/events/api/serializers.py +++ b/website/events/api/serializers.py @@ -32,8 +32,7 @@ class CalenderJSSerializer(serializers.ModelSerializer): "url", "title", "description", - "backgroundColor", - "textColor", + "classNames", "blank", ) @@ -44,8 +43,7 @@ class CalenderJSSerializer(serializers.ModelSerializer): url = serializers.SerializerMethodField("_url") title = serializers.SerializerMethodField("_title") description = serializers.SerializerMethodField("_description") - backgroundColor = serializers.SerializerMethodField("_background_color") - textColor = serializers.SerializerMethodField("_text_color") + classNames = serializers.SerializerMethodField("_class_names") blank = serializers.SerializerMethodField("_target_blank") def _start(self, instance): @@ -69,10 +67,7 @@ class CalenderJSSerializer(serializers.ModelSerializer): def _description(self, instance): return unescape(strip_tags(instance.description)) - def _background_color(self, instance): - pass - - def _text_color(self, instance): + def _class_names(self, instance): pass def _target_blank(self, instance): @@ -86,31 +81,23 @@ class EventCalenderJSSerializer(CalenderJSSerializer): def _url(self, instance): return reverse("events:event", kwargs={"pk": instance.id}) - def _background_color(self, instance): - try: - if services.is_user_registered(self.context["member"], instance): - return "#E62272" - except AttributeError: - pass - return "#616161" - - def _text_color(self, instance): - return "#FFFFFF" + def _class_names(self, instance): + class_names = ["regular-event"] + if services.is_user_registered(self.context["member"], instance): + class_names.append("has-registration") + return class_names class UnpublishedEventSerializer(CalenderJSSerializer): """ - See CalenderJSSerializer, customised colors + See CalenderJSSerializer, customised classes """ class Meta(CalenderJSSerializer.Meta): model = Event - def _background_color(self, instance): - return "rgba(255,0,0,0.3)" - - def _text_color(self, instance): - return "black" + def _class_names(self, instance): + return ["unpublished-event"] def _url(self, instance): return reverse("admin:events_event_details", kwargs={"pk": instance.id}) diff --git a/website/events/static/events/css/admin.scss b/website/events/static/events/css/admin.scss index d677b933b072d14998b86abe70a1219cf694752a..3334e4439ee850931479c882762398ef75e318ca 100644 --- a/website/events/static/events/css/admin.scss +++ b/website/events/static/events/css/admin.scss @@ -49,11 +49,11 @@ } select[name=payment] { - background: $danger; + background: $red; color: white; &.paid { - background: $success; + background: $green; } @media(max-width: 767px) { diff --git a/website/events/static/events/css/style.scss b/website/events/static/events/css/style.scss index a3d74a445e3b235ea1e6a05f9df5b330db7c376d..466331b77e06ba82d3601ca3c0ed4233e43d2b0e 100644 --- a/website/events/static/events/css/style.scss +++ b/website/events/static/events/css/style.scss @@ -9,7 +9,7 @@ height: calc(100% - 15px); &:hover { - background-color: $grey; + background-color: $card-background-hover; } .card-date { @@ -30,7 +30,7 @@ } .no-registration { - background-color: $dark-grey; + background-color: $grey; } .has-registration { @@ -42,11 +42,11 @@ #events-index { .fc-bootstrap .fc-today { - background: #fff9fc; + background: $background-shade-light; } .fc-now-indicator { - border-color: $dark-grey; + border-color: $preset; &.fc-now-indicator-arrow { border-top-color: transparent; @@ -68,21 +68,70 @@ border-radius: 20px; margin-right: 1rem; flex-shrink: 0; + + &.regular-event { + background-color: $grey; + &.has-registration { + background-color: $preset; + } + } + + &.unpublished-event, &.unpublished-event:active, &.unpublished-event:hover { + background-color: rgba(255, 0, 0, 0.3); + } + + &.partner-event { + background-color: $secondary; + } + + &.birthday-event { + background-color: $secondary; + &.honorary { + background-color: $preset; + } + } } } } - .fc-event-dot { - background-color: #616161; - } - .fc-event { - background-color: #616161; + color: $white; + background-color: $grey; border-radius: 0; border: none; overflow: hidden; transition-property: opacity; + &.regular-event { + &.has-registration { + background-color: $preset; + color: $white; + } + } + + &.unpublished-event, &.unpublished-event:active, &.unpublished-event:hover { + background-color: rgba(255, 0, 0, 0.3); + color: $secondary; + } + + &.partner-event { + color: $preset; + background-color: $secondary; + + &:active, &:hover { + color: $preset; + } + } + + &.birthday-event { + background-color: $secondary; + color: $secondary-contrast; + &.honorary { + background-color: $preset; + color: $secondary; + } + } + .fc-content { padding: 5px; @@ -100,8 +149,6 @@ .fc-content { opacity: 0.8; } - - color: $white; } } } diff --git a/website/events/static/events/js/listview.js b/website/events/static/events/js/listview.js index bd7af169ddc3add8c89110589b972a24d80e8ea8..41c398631c354bd704f39623734a6660bfdf4f50 100644 --- a/website/events/static/events/js/listview.js +++ b/website/events/static/events/js/listview.js @@ -47,7 +47,7 @@ class ListView extends FullCalendar.View { const eventIndicator = document.createElement('div'); eventIndicator.classList.add('event-indication'); - eventIndicator.style = 'background-color: ' + def.ui.backgroundColor; + eventIndicator.classList.add(def.ui.classNames); const cardHead = document.createElement('div'); cardHead.classList.add('card-header', 'collapsed'); diff --git a/website/members/api/serializers.py b/website/members/api/serializers.py index d84ca71cdffb3bfa950b5958e014c5bb3f27f1cd..86f81f45be6aa89c286381c08794c71a352c76d4 100644 --- a/website/members/api/serializers.py +++ b/website/members/api/serializers.py @@ -39,14 +39,12 @@ class MemberBirthdaySerializer(CalenderJSSerializer): return membership.get_type_display() return "" - def _background_color(self, instance): + def _class_names(self, instance): + class_names = ["birthday-event"] membership = instance.current_membership if membership and membership.type == "honorary": - return "#E62272" - return "black" - - def _text_color(self, instance): - return "white" + class_names.append("honorary") + return class_names class ProfileRetrieveSerializer(serializers.ModelSerializer): diff --git a/website/partners/api/serializers.py b/website/partners/api/serializers.py index d9a95ccedf3ed036eb4c7522e7698e32000cda0d..064128647b1f6cc0db026f085aba3e9c49f2ae5b 100644 --- a/website/partners/api/serializers.py +++ b/website/partners/api/serializers.py @@ -20,13 +20,9 @@ class PartnerEventCalendarJSSerializer(CalenderJSSerializer): return "{} ({})".format(instance.title, instance.partner.name) return "{} ({})".format(instance.title, instance.other_partner) - def _background_color(self, instance): + def _class_names(self, instance): """Return the color of the background.""" - return "black" - - def _text_color(self, instance): - """Return the color of the text.""" - return "#E62272" + return ["partner-event"] def _url(self, instance): """Return the url of the partner event.""" diff --git a/website/partners/static/partners/css/style.scss b/website/partners/static/partners/css/style.scss index 0bf4532c12227d39814571e609ddb97ced1af2a0..4a3901fe8186db70df4850efcc9812aeab6569df 100644 --- a/website/partners/static/partners/css/style.scss +++ b/website/partners/static/partners/css/style.scss @@ -1,5 +1,5 @@ #partner-banners { - background-color: $grey; + background-color: $banner-background; height: 140px; overflow: hidden; @@ -95,7 +95,7 @@ flex-direction: column; justify-content: center; - background-color: $grey; + background-color: $banner-background; img { width: auto; diff --git a/website/payments/static/payments/css/style.scss b/website/payments/static/payments/css/style.scss index 2a21ffae39d95abb8226a66e1b00c95d463ac184..5686c6cf2413713e5ec8905686fcf09f00b00d87 100644 --- a/website/payments/static/payments/css/style.scss +++ b/website/payments/static/payments/css/style.scss @@ -9,6 +9,7 @@ #id_signature_canvas { height: 10rem; + background-color: #ffffff; } #canvas-container { @@ -19,7 +20,7 @@ height: 2rem; width: 2rem; top: 0.25rem; - color: $black; + color: #000000; display: inline-block; font-weight: 400; diff --git a/website/pizzas/static/pizzas/css/admin.scss b/website/pizzas/static/pizzas/css/admin.scss index a9de6fdf0b3e83df339ce72a6af67bd1f41d4142..46041156fc80bf7f8c339c709c634d044f967615 100644 --- a/website/pizzas/static/pizzas/css/admin.scss +++ b/website/pizzas/static/pizzas/css/admin.scss @@ -63,11 +63,11 @@ } select[name=payment] { - background: $danger; + background: $red; color: white; &.paid { - background: $success; + background: $green; } @media(max-width: 767px) { diff --git a/website/pizzas/static/pizzas/css/style.scss b/website/pizzas/static/pizzas/css/style.scss index e1b11882892309f918bd1428b789793035516a7c..ecc697d6924b678035e1d9f3ef899d76d4637268 100644 --- a/website/pizzas/static/pizzas/css/style.scss +++ b/website/pizzas/static/pizzas/css/style.scss @@ -7,19 +7,19 @@ h1 { font-size: 2rem; text-align: center; - color: $white; } h2 { text-align: center; - color: $white; } &.paid { background-color: $success; + color: $success-contrast; } &.unpaid { background-color: $danger; + color: $danger-contrast; } } diff --git a/website/registrations/static/registrations/css/style.scss b/website/registrations/static/registrations/css/style.scss index c1e02a505d5fa7a523b8cfa160ee21298f1a44c4..f48ee01ddf909460458631287b816cbd84b02d40 100644 --- a/website/registrations/static/registrations/css/style.scss +++ b/website/registrations/static/registrations/css/style.scss @@ -3,7 +3,7 @@ label::after { content: '*'; margin-left: 2px; - color: $dark-grey; + color: $text-color; } } } diff --git a/website/thaliawebsite/static/css/_alerts.scss b/website/thaliawebsite/static/css/_alerts.scss index 3fd5fa5dcac2ed8b1aa250bddcc14c67d25be5bf..2c136cdc553038b851628c49f6d21b18c681b6db 100644 --- a/website/thaliawebsite/static/css/_alerts.scss +++ b/website/thaliawebsite/static/css/_alerts.scss @@ -4,7 +4,7 @@ } .alert-success { - color: $white; + color: $success-contrast; background-color: $success; border-color: $success-hover; } @@ -14,7 +14,7 @@ } .alert-info { - color: $white; + color: $info-contrast; background-color: $info; border-color: $info-hover; } @@ -24,7 +24,7 @@ } .alert-warning { - color: $white; + color: $warning-contrast; background-color: $warning; border-color: $warning-hover; } @@ -34,7 +34,7 @@ } .alert-danger, .alert-error { - color: $white; + color: $danger-contrast; background-color: $danger; border-color: $danger-hover; } diff --git a/website/thaliawebsite/static/css/_buttons.scss b/website/thaliawebsite/static/css/_buttons.scss index 581c92662235fc82050d83bbf5056296adc5746a..7294a0b7c73a64fb4482bac5ca7db39c6fea127a 100755 --- a/website/thaliawebsite/static/css/_buttons.scss +++ b/website/thaliawebsite/static/css/_buttons.scss @@ -39,7 +39,7 @@ .btn-primary, .btn-primary:active, .btn-primary:focus { background: $preset !important; border-color: $preset !important; - color: $white !important; + color: $preset-contrast !important; &:hover, &.active { background: $preset-hover !important; @@ -50,7 +50,7 @@ .btn-secondary, .btn-secondary:active, .btn-secondary:focus { background: $secondary !important; border-color: $secondary !important; - color: $white !important; + color: $secondary-contrast !important; &:hover { background: $secondary-hover !important; @@ -61,7 +61,7 @@ .btn-success, .btn-success:active, .btn-success:focus { background: $success !important; border-color: $success !important; - color: $white !important; + color: $success-contrast !important; &:hover { background: $success-hover !important; @@ -72,7 +72,7 @@ .btn-info, .btn-info:active, .btn-info:focus { background: $info !important; border-color: $info !important; - color: $white !important; + color: $info-contrast !important; &:hover { background: $info-hover !important; @@ -83,7 +83,7 @@ .btn-warning, .btn-warning:active, .btn-warning:focus { background: $warning !important; border-color: $warning !important; - color: $white !important; + color: $warning-contrast !important; &:hover { background: $warning-hover !important; @@ -94,7 +94,7 @@ .btn-danger, .btn-danger:active, .btn-danger:focus { background: $danger !important; border-color: $danger !important; - color: $white !important; + color: $danger-contrast !important; &:hover { background: $danger-hover !important; diff --git a/website/thaliawebsite/static/css/_cards.scss b/website/thaliawebsite/static/css/_cards.scss index c5d19008070828296d71d424bea059e575ba8dee..7b998b3ce108da2a32ec418b3a9f84f889d28edd 100755 --- a/website/thaliawebsite/static/css/_cards.scss +++ b/website/thaliawebsite/static/css/_cards.scss @@ -2,7 +2,7 @@ position: relative; display: block; margin-bottom: 15px; - background-color: $light-grey; + background-color: $card-background; border-radius: 0; border: 0; width: 100%; @@ -33,7 +33,7 @@ .card-text { font-size: .9rem; - color: #444; + color: $card-background-contrast; } .card-btn { @@ -49,8 +49,8 @@ font-weight: 700; text-transform: uppercase; padding: 1.25rem; - color: $preset; - background-color: $grey; + color: $card-background-hover-contrast; + background-color: $card-background-hover; border-radius: 0; transition: all 300ms ease-in-out 0s; @@ -59,23 +59,23 @@ -o-transition: all 300ms ease-in-out 0s; a { - color: $preset; + color: $card-background-hover-contrast; } &.collapsed { - color: $black; - background-color: $light-grey; + color: $card-background-contrast; + background-color: $card-background; a { - color: $black; + color: $card-background-contrast; } &:hover { - color: $preset; - background-color: $grey; + color: $card-background-hover-contrast; + background-color: $card-background-hover; a { - color: $preset; + color: $card-background-hover-contrast; } } } diff --git a/website/thaliawebsite/static/css/_forms.scss b/website/thaliawebsite/static/css/_forms.scss index 7a0d3bab72a10ef4a96cbc7f946b8117d0f7d2bc..3fd12b6e6d87d6b49202a47e897b12d39da74209 100644 --- a/website/thaliawebsite/static/css/_forms.scss +++ b/website/thaliawebsite/static/css/_forms.scss @@ -1,11 +1,11 @@ .form-control { - color: $text-color; - background: $white; + color: $form-text; + background: $form-background; font-weight: $regular; font-size: 14px; font-family: $primary-font; letter-spacing: $letter-spacing; - border: 2px solid $black; + border: 2px solid $form-border; border-radius: 0; padding: 3px 10px; min-height: 50px; @@ -19,5 +19,7 @@ &:focus { border-color: $preset; box-shadow: none; + color: $form-text; + background: $form-background; } } diff --git a/website/thaliawebsite/static/css/_navs.scss b/website/thaliawebsite/static/css/_navs.scss index b41bd74994d5bd407ecccf6edc06cf84e2322740..164421fd470091b053c8e65830d416fcacf853af 100644 --- a/website/thaliawebsite/static/css/_navs.scss +++ b/website/thaliawebsite/static/css/_navs.scss @@ -10,7 +10,8 @@ } .nav-link { - color: $black; + background-color: transparent; + color: $nav-link-color; font-family: $header-font; font-size: 16px; line-height: 18px; @@ -19,22 +20,18 @@ border-top-right-radius: 0; border-top-left-radius: 0; - &.active { - color: $preset; - } - &:hover { color: $preset-hover; } - &.mixitup-control-active { - color: #E62272; - border-color: #dee2e6 #dee2e6 #fff; + &.active, &.mixitup-control-active { + color: $preset; + border-color: #dee2e6 #dee2e6 $background-color; } } .nav-select { - color: $black; + color: $secondary; font-family: $header-font; font-size: 16px; line-height: 18px; @@ -45,7 +42,7 @@ border: 1px solid transparent; &.active { - color: #E62272; + color: $preset; } } } @@ -59,8 +56,11 @@ border-radius: 0; .page-item { + .page-link { color: $preset; + background-color: $background-color; + border-color: $background-shade; border-radius: 0; &:focus { diff --git a/website/thaliawebsite/static/css/_progress.scss b/website/thaliawebsite/static/css/_progress.scss index 0f326838858c45d12fc868152e3b1d8190ba82fc..88f4eeea732ef02b15d2e94d63a8c85d964cfab3 100644 --- a/website/thaliawebsite/static/css/_progress.scss +++ b/website/thaliawebsite/static/css/_progress.scss @@ -2,7 +2,7 @@ -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; - background-color: $grey; + background-color: $card-background-hover; .progress-bar { -webkit-border-radius: 0; diff --git a/website/thaliawebsite/static/css/_typography.scss b/website/thaliawebsite/static/css/_typography.scss index 6f16ee7d96edb3d2a1f2b63a1c4f19908b3b2f96..244fcd6de1501fef900188d4107ff481de8e8ad7 100755 --- a/website/thaliawebsite/static/css/_typography.scss +++ b/website/thaliawebsite/static/css/_typography.scss @@ -64,31 +64,31 @@ p { } .bg-primary { - color: $white; + color: $preset-contrast; background: $preset; padding: 3px 4px; } .bg-success { - color: $white; + color: $success-contrast; background: $success; padding: 3px 4px; } .bg-info { - color: $white; + color: $info-contrast; background: $info; padding: 3px 4px; } .bg-warning { - color: $white; + color: $warning-contrast; background: $warning; padding: 3px 4px; } .bg-danger { - color: $white; + color: $danger-contrast; background: $danger; padding: 3px 4px; } diff --git a/website/thaliawebsite/static/css/_variable-usage-dark.scss b/website/thaliawebsite/static/css/_variable-usage-dark.scss new file mode 100644 index 0000000000000000000000000000000000000000..1c8646a2a33ecaef85bf97b207826915f5805c24 --- /dev/null +++ b/website/thaliawebsite/static/css/_variable-usage-dark.scss @@ -0,0 +1,44 @@ +$background-color: $black; +$background-shade: $dark-grey; +$background-shade-light: $darkdark-grey; +$navbar-background-color: $black; + +$card-background: $darkdark-grey; +$card-background-contrast: $white; +$card-background-hover: $dark-grey; +$card-background-hover-contrast: $white; + +$banner-background: $dark-grey; + +$form-background: $black; +$form-background-disabled: $darkdark-grey; +$form-border: $white; +$form-text: $light-grey; + +$title-color: $white; +$sub-title-color: $lightlight-grey; +$text-color: $light-grey; +$nav-link-color: $white; + +$footer-text-color: $white; +$footer-text-color-hover: $lightlight-grey; + +$preset: $magenta; +$preset-hover: $magenta-shade; +$preset-contrast: $white; +$preset-contrast-hover: $light-grey; +$secondary: $light-grey; +$secondary-hover: $lightlight-grey; +$secondary-contrast: $black; +$success: $green; +$success-hover: $green-shade; +$success-contrast: $white; +$info: $blue; +$info-hover: $blue-shade; +$info-contrast: $white; +$warning: $yellow; +$warning-hover: $yellow-shade; +$warning-contrast: $white; +$danger: $red; +$danger-hover: $red-shade; +$danger-contrast: $white; diff --git a/website/thaliawebsite/static/css/_variable-usage.scss b/website/thaliawebsite/static/css/_variable-usage.scss new file mode 100644 index 0000000000000000000000000000000000000000..4da7fcd7051973104749a438ccae49f600a32881 --- /dev/null +++ b/website/thaliawebsite/static/css/_variable-usage.scss @@ -0,0 +1,44 @@ +$background-color: $white; +$background-shade: $light-grey; +$background-shade-light: $lightlight-grey; +$navbar-background-color: $white; + +$card-background: $lightlight-grey; +$card-background-contrast: $black; +$card-background-hover: $light-grey; +$card-background-hover-contrast: $magenta; + +$banner-background: $light-grey; + +$form-background: $white; +$form-background-disabled: $light-grey; +$form-border: $black; +$form-text: $dark-grey; + +$title-color: $black; +$sub-title-color: $dark-grey; +$text-color: $dark-grey; +$nav-link-color: $black; + +$footer-text-color: $white; +$footer-text-color-hover: $lightlight-grey; + +$preset: $magenta; +$preset-hover: $magenta-shade; +$preset-contrast: $white; +$preset-contrast-hover: $light-grey; +$secondary: $black; +$secondary-hover: $darkdark-grey; +$secondary-contrast: $white; +$success: $green; +$success-hover: $green-shade; +$success-contrast: $white; +$info: $blue; +$info-hover: $blue-shade; +$info-contrast: $white; +$warning: $yellow; +$warning-hover: $yellow-shade; +$warning-contrast: $white; +$danger: $red; +$danger-hover: $red-shade; +$danger-contrast: $white; diff --git a/website/thaliawebsite/static/css/_variables.scss b/website/thaliawebsite/static/css/_variables.scss index 5c550c6032521761b140d5bd52225a8a351020b0..79581d71852a0dc57c9719ab66be76cd6aeb681c 100755 --- a/website/thaliawebsite/static/css/_variables.scss +++ b/website/thaliawebsite/static/css/_variables.scss @@ -8,27 +8,22 @@ $letter-spacing: 0px; $fa-font-path: "../fonts"; // Theme Colors -$preset: #E62272; -$preset-hover: #CF1760; - -$primary: $preset; -$primary-hover: $preset-hover; -$secondary: #000000; -$secondary-hover: #1d1d1d; -$success: #55c025; -$success-hover: #52a425; -$info: #1e9ae6; -$info-hover: #1e83cf; -$warning: #ffc107; -$warning-hover: #e0a800; -$danger: #e62a17; -$danger-hover: #ce2816; -$title-color: #000; -$sub-title-color: #333; -$text-color: #444; -$white: #fff; -$light-grey: #f7f7f7; -$grey: #ddd; -$dark-grey: #616161; -$black: #000; +$magenta: #E62272; +$magenta-shade: #CF1760; +$black: #111111; +$darkdark-grey: #212121; +$dark-grey: #444444; +$grey: #616161; +$light-grey: #dddddd; +$lightlight-grey: #f7f7f7; +$white: #ffffff; $preset-transparent: RGBA(235, 88, 111, 0.7); + +$green: #55c025; +$green-shade: #52a425; +$blue: #1e9ae6; +$blue-shade: #1e83cf; +$yellow: #ffc107; +$yellow-shade: #e0a800; +$red: #e62a17; +$red-shade: #ce2816; diff --git a/website/thaliawebsite/static/css/base.scss b/website/thaliawebsite/static/css/base.scss index 69ff7fb9f2dbc4fea993f63f22dde499324cc636..90d8e9a9aeca677d5aeb4094008c75639f0851d3 100644 --- a/website/thaliawebsite/static/css/base.scss +++ b/website/thaliawebsite/static/css/base.scss @@ -5,6 +5,12 @@ html { body { margin-bottom: 80px; + background-color: $background-color; + color: $text-color; +} + +.form-control:disabled, .form-control[readonly] { + background-color: $form-background-disabled; } #accentbar { @@ -20,8 +26,8 @@ body { position: -webkit-sticky; position: sticky; font-size: 16px; - background-color: $white; - border-bottom: 1px solid $grey; + background-color: $navbar-background-color; + border-bottom: 1px solid $background-shade; top: 5px; z-index: 1020; @@ -39,10 +45,14 @@ body { } } + .navbar-toggler { + color: $nav-link-color; + } + .navbar-nav { .nav-item { .nav-link { - color: $black; + color: $nav-link-color; font-family: $header-font; text-transform: uppercase; } @@ -81,12 +91,25 @@ body { } } +.table { + color: $text-color; +} + +.table-bordered { + border-color: $background-shade; +} + +.table-bordered td, .table-bordered th { + border-color: $background-shade; +} + + .table-clickable { tbody tr { &:hover { cursor: pointer; color: $preset; - background-color: $light-grey; + background-color: $background-shade; } } } @@ -180,7 +203,7 @@ body { #page-content { padding: 1rem 0 4rem 0; - border-top: 1px solid $grey; + border-top: 1px solid $background-shade; .page-section { padding: 2rem 1rem 0 1rem; @@ -188,7 +211,7 @@ body { h1.section-title { position: relative; margin-bottom: 1.5rem; - border-top: solid 1px $grey; + border-top: solid 1px $background-shade; padding: 20px 0 0; &::before { @@ -223,7 +246,7 @@ footer { background: $preset; overflow: hidden; font-size: 14px; - color: $white; + color: $footer-text-color; padding: 25px 0; margin: 0; bottom: 0; @@ -234,11 +257,11 @@ footer { } a { - color: $white; + color: $footer-text-color; margin-left: .7rem; &:hover { - color: $grey; + color: $footer-text-color-hover; } } @@ -250,14 +273,17 @@ footer { .dropdown-menu { border-top-left-radius: 0; border-top-right-radius: 0; + background-color: $background-color; + border-color: $background-shade; .dropdown-item { padding: 0.5rem 1.5rem; font-size: .8rem; + color: $nav-link-color; &:hover, &:active, &.active { background-color: $preset; - color: $white; + color: $preset-contrast; } } } @@ -281,7 +307,7 @@ img { right: -3px; .ribbon { - color: white; + color: $preset-contrast; text-align: center; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); @@ -330,7 +356,7 @@ img { height: 100%; h5, p { - color: $white; + color: $preset-contrast; -webkit-transform: translateY(-50px); } @@ -366,7 +392,7 @@ img { -webkit-transition: all 300ms ease-in-out 0s; -o-transition: all 300ms ease-in-out 0s; - color: $white; + color: $preset-contrast; font-size: 15px; background: rgba(0, 0, 0, 0); diff --git a/website/thaliawebsite/static/css/main-dark.scss b/website/thaliawebsite/static/css/main-dark.scss new file mode 100644 index 0000000000000000000000000000000000000000..5fbecbf3945ad46f3ad8179541c12cbe09e68c34 --- /dev/null +++ b/website/thaliawebsite/static/css/main-dark.scss @@ -0,0 +1,32 @@ +@import "./bootstrap.min.css"; +@import "./animate.min.css"; +@import "./jquery.fancybox.css"; + +@import "fonts"; +@import "variables"; +@import "variable-usage-dark"; +@import "mixins"; +@import "typography"; +@import "buttons"; +@import "cards"; +@import "forms"; +@import "alerts"; +@import "navs"; +@import "progress"; + +@import "./base.scss"; +@import "../../announcements/static/announcements/css/style.scss"; +@import "../../documents/static/documents/css/style.scss"; +@import "../../partners/static/partners/css/style.scss"; +@import "../../photos/static/photos/css/style.scss"; +@import "../../events/static/events/css/style.scss"; +@import "../../members/static/members/css/style.scss"; +@import "../../thabloid/static/thabloid/css/style.scss"; +@import "../../pizzas/static/pizzas/css/style.scss"; +@import "../../education/static/education/css/style.scss"; +@import "../../payments/static/payments/css/style.scss"; +@import "../../registrations/static/registrations/css/style.scss"; + +@import "./fontawesome/fontawesome.scss"; +@import "./fontawesome/solid.scss"; +@import "./fontawesome/brands.scss"; diff --git a/website/thaliawebsite/static/css/main.scss b/website/thaliawebsite/static/css/main.scss index b5210875fe14fb16f535239d98bf505eec1de7fc..8d443d5700d65ceef0b8cc6a0195696648287a49 100755 --- a/website/thaliawebsite/static/css/main.scss +++ b/website/thaliawebsite/static/css/main.scss @@ -4,6 +4,7 @@ @import "fonts"; @import "variables"; +@import "variable-usage"; @import "mixins"; @import "typography"; @import "buttons"; diff --git a/website/thaliawebsite/static/img/logo-en-dark.svg b/website/thaliawebsite/static/img/logo-en-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..9bf966e67745dedd384172ed0c6df027c4f957a5 --- /dev/null +++ b/website/thaliawebsite/static/img/logo-en-dark.svg @@ -0,0 +1,46 @@ + + + + Page 1 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/thaliawebsite/static/img/logo-en.png b/website/thaliawebsite/static/img/logo-en.png deleted file mode 100644 index b377e963e557d305ecc13b1f21b3ad7ecc894d01..0000000000000000000000000000000000000000 Binary files a/website/thaliawebsite/static/img/logo-en.png and /dev/null differ diff --git a/website/thaliawebsite/static/img/logo-en.svg b/website/thaliawebsite/static/img/logo-en.svg new file mode 100644 index 0000000000000000000000000000000000000000..f64e75c792437862403517d542d4adadd8221657 --- /dev/null +++ b/website/thaliawebsite/static/img/logo-en.svg @@ -0,0 +1,379 @@ + + + + +Page 1 +Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/thaliawebsite/static/img/logo-nl-dark.svg b/website/thaliawebsite/static/img/logo-nl-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..41fa4bb93357438c253cd0adead7b111b3134704 --- /dev/null +++ b/website/thaliawebsite/static/img/logo-nl-dark.svg @@ -0,0 +1,64 @@ + + + + +Page 1 +Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/thaliawebsite/static/img/logo-nl.png b/website/thaliawebsite/static/img/logo-nl.png deleted file mode 100644 index 54da463e8f4e839a6f07c0cd3357c944726aee96..0000000000000000000000000000000000000000 Binary files a/website/thaliawebsite/static/img/logo-nl.png and /dev/null differ diff --git a/website/thaliawebsite/static/img/logo-nl.svg b/website/thaliawebsite/static/img/logo-nl.svg new file mode 100644 index 0000000000000000000000000000000000000000..f0cade6179f0eda49c25d9871c370f1901f9f451 --- /dev/null +++ b/website/thaliawebsite/static/img/logo-nl.svg @@ -0,0 +1,64 @@ + + + + +Page 1 +Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/thaliawebsite/static/styleguide/images/committee-promotion-back-example.png b/website/thaliawebsite/static/styleguide/images/committee-promotion-back-example.png index dad8cce70eb1be5be8c7c84d248b02f87cddca35..a4692872f160b03e97eefb234abcfec572978e14 100644 Binary files a/website/thaliawebsite/static/styleguide/images/committee-promotion-back-example.png and b/website/thaliawebsite/static/styleguide/images/committee-promotion-back-example.png differ diff --git a/website/thaliawebsite/static/styleguide/images/committee-promotion-front-example.png b/website/thaliawebsite/static/styleguide/images/committee-promotion-front-example.png index 92d7f882cead1c373d80ef30b4e11038c94c5a2b..cf09cbed611a05772b6b5d760b8ebcd23bf56c69 100644 Binary files a/website/thaliawebsite/static/styleguide/images/committee-promotion-front-example.png and b/website/thaliawebsite/static/styleguide/images/committee-promotion-front-example.png differ diff --git a/website/thaliawebsite/templates/base.html b/website/thaliawebsite/templates/base.html index 87b495e3a4fc5eeed34c3f5107e768a34a894275..603fb4f74be1cbde6d5c457d30bdd563ef7c0c79 100644 --- a/website/thaliawebsite/templates/base.html +++ b/website/thaliawebsite/templates/base.html @@ -38,6 +38,8 @@ {% compress css %} + {% endcompress %} {% endblock %} @@ -76,11 +78,16 @@