Commit 86c59599 authored by Luc Knol's avatar Luc Knol
Browse files

Merge branch 'revert-1e1f8cba' into 'master'

Add dark mode styling

Closes #953

See merge request !1480
parents 7255f425 86c2e56e
#announcements-alerts { #announcements-alerts {
.announcement { .announcement {
background: $preset; background: $preset;
color: $white; color: $preset-contrast;
text-align: center; text-align: center;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
position: relative; position: relative;
.close { .close {
color: $white; color: $preset-contrast;
} }
p { p {
display: inline; display: inline;
margin-left: 0.5rem; margin-left: 0.5rem;
color: $white; color: $preset-contrast;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: $bold; font-weight: $bold;
} }
a { a {
color: $white; color: $preset-contrast;
text-decoration: underline; text-decoration: underline;
} }
a:hover { a:hover {
color: $light-grey; color: $preset-contrast-hover;
} }
button { button {
......
...@@ -32,8 +32,7 @@ class CalenderJSSerializer(serializers.ModelSerializer): ...@@ -32,8 +32,7 @@ class CalenderJSSerializer(serializers.ModelSerializer):
"url", "url",
"title", "title",
"description", "description",
"backgroundColor", "classNames",
"textColor",
"blank", "blank",
) )
...@@ -44,8 +43,7 @@ class CalenderJSSerializer(serializers.ModelSerializer): ...@@ -44,8 +43,7 @@ class CalenderJSSerializer(serializers.ModelSerializer):
url = serializers.SerializerMethodField("_url") url = serializers.SerializerMethodField("_url")
title = serializers.SerializerMethodField("_title") title = serializers.SerializerMethodField("_title")
description = serializers.SerializerMethodField("_description") description = serializers.SerializerMethodField("_description")
backgroundColor = serializers.SerializerMethodField("_background_color") classNames = serializers.SerializerMethodField("_class_names")
textColor = serializers.SerializerMethodField("_text_color")
blank = serializers.SerializerMethodField("_target_blank") blank = serializers.SerializerMethodField("_target_blank")
def _start(self, instance): def _start(self, instance):
...@@ -69,10 +67,7 @@ class CalenderJSSerializer(serializers.ModelSerializer): ...@@ -69,10 +67,7 @@ class CalenderJSSerializer(serializers.ModelSerializer):
def _description(self, instance): def _description(self, instance):
return unescape(strip_tags(instance.description)) return unescape(strip_tags(instance.description))
def _background_color(self, instance): def _class_names(self, instance):
pass
def _text_color(self, instance):
pass pass
def _target_blank(self, instance): def _target_blank(self, instance):
...@@ -86,31 +81,23 @@ class EventCalenderJSSerializer(CalenderJSSerializer): ...@@ -86,31 +81,23 @@ class EventCalenderJSSerializer(CalenderJSSerializer):
def _url(self, instance): def _url(self, instance):
return reverse("events:event", kwargs={"pk": instance.id}) return reverse("events:event", kwargs={"pk": instance.id})
def _background_color(self, instance): def _class_names(self, instance):
try: class_names = ["regular-event"]
if services.is_user_registered(self.context["member"], instance): if services.is_user_registered(self.context["member"], instance):
return "#E62272" class_names.append("has-registration")
except AttributeError: return class_names
pass
return "#616161"
def _text_color(self, instance):
return "#FFFFFF"
class UnpublishedEventSerializer(CalenderJSSerializer): class UnpublishedEventSerializer(CalenderJSSerializer):
""" """
See CalenderJSSerializer, customised colors See CalenderJSSerializer, customised classes
""" """
class Meta(CalenderJSSerializer.Meta): class Meta(CalenderJSSerializer.Meta):
model = Event model = Event
def _background_color(self, instance): def _class_names(self, instance):
return "rgba(255,0,0,0.3)" return ["unpublished-event"]
def _text_color(self, instance):
return "black"
def _url(self, instance): def _url(self, instance):
return reverse("admin:events_event_details", kwargs={"pk": instance.id}) return reverse("admin:events_event_details", kwargs={"pk": instance.id})
......
...@@ -49,11 +49,11 @@ ...@@ -49,11 +49,11 @@
} }
select[name=payment] { select[name=payment] {
background: $danger; background: $red;
color: white; color: white;
&.paid { &.paid {
background: $success; background: $green;
} }
@media(max-width: 767px) { @media(max-width: 767px) {
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
height: calc(100% - 15px); height: calc(100% - 15px);
&:hover { &:hover {
background-color: $grey; background-color: $card-background-hover;
} }
.card-date { .card-date {
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
} }
.no-registration { .no-registration {
background-color: $dark-grey; background-color: $grey;
} }
.has-registration { .has-registration {
...@@ -42,11 +42,11 @@ ...@@ -42,11 +42,11 @@
#events-index { #events-index {
.fc-bootstrap .fc-today { .fc-bootstrap .fc-today {
background: #fff9fc; background: $background-shade-light;
} }
.fc-now-indicator { .fc-now-indicator {
border-color: $dark-grey; border-color: $preset;
&.fc-now-indicator-arrow { &.fc-now-indicator-arrow {
border-top-color: transparent; border-top-color: transparent;
...@@ -68,21 +68,70 @@ ...@@ -68,21 +68,70 @@
border-radius: 20px; border-radius: 20px;
margin-right: 1rem; margin-right: 1rem;
flex-shrink: 0; 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 { .fc-event {
background-color: #616161; color: $white;
background-color: $grey;
border-radius: 0; border-radius: 0;
border: none; border: none;
overflow: hidden; overflow: hidden;
transition-property: opacity; 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 { .fc-content {
padding: 5px; padding: 5px;
...@@ -100,8 +149,6 @@ ...@@ -100,8 +149,6 @@
.fc-content { .fc-content {
opacity: 0.8; opacity: 0.8;
} }
color: $white;
} }
} }
} }
......
...@@ -47,7 +47,7 @@ class ListView extends FullCalendar.View { ...@@ -47,7 +47,7 @@ class ListView extends FullCalendar.View {
const eventIndicator = document.createElement('div'); const eventIndicator = document.createElement('div');
eventIndicator.classList.add('event-indication'); eventIndicator.classList.add('event-indication');
eventIndicator.style = 'background-color: ' + def.ui.backgroundColor; eventIndicator.classList.add(def.ui.classNames);
const cardHead = document.createElement('div'); const cardHead = document.createElement('div');
cardHead.classList.add('card-header', 'collapsed'); cardHead.classList.add('card-header', 'collapsed');
......
...@@ -39,14 +39,12 @@ class MemberBirthdaySerializer(CalenderJSSerializer): ...@@ -39,14 +39,12 @@ class MemberBirthdaySerializer(CalenderJSSerializer):
return membership.get_type_display() return membership.get_type_display()
return "" return ""
def _background_color(self, instance): def _class_names(self, instance):
class_names = ["birthday-event"]
membership = instance.current_membership membership = instance.current_membership
if membership and membership.type == "honorary": if membership and membership.type == "honorary":
return "#E62272" class_names.append("honorary")
return "black" return class_names
def _text_color(self, instance):
return "white"
class ProfileRetrieveSerializer(serializers.ModelSerializer): class ProfileRetrieveSerializer(serializers.ModelSerializer):
......
...@@ -20,13 +20,9 @@ class PartnerEventCalendarJSSerializer(CalenderJSSerializer): ...@@ -20,13 +20,9 @@ class PartnerEventCalendarJSSerializer(CalenderJSSerializer):
return "{} ({})".format(instance.title, instance.partner.name) return "{} ({})".format(instance.title, instance.partner.name)
return "{} ({})".format(instance.title, instance.other_partner) return "{} ({})".format(instance.title, instance.other_partner)
def _background_color(self, instance): def _class_names(self, instance):
"""Return the color of the background.""" """Return the color of the background."""
return "black" return ["partner-event"]
def _text_color(self, instance):
"""Return the color of the text."""
return "#E62272"
def _url(self, instance): def _url(self, instance):
"""Return the url of the partner event.""" """Return the url of the partner event."""
......
#partner-banners { #partner-banners {
background-color: $grey; background-color: $banner-background;
height: 140px; height: 140px;
overflow: hidden; overflow: hidden;
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
background-color: $grey; background-color: $banner-background;
img { img {
width: auto; width: auto;
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
#id_signature_canvas { #id_signature_canvas {
height: 10rem; height: 10rem;
background-color: #ffffff;
} }
#canvas-container { #canvas-container {
...@@ -19,7 +20,7 @@ ...@@ -19,7 +20,7 @@
height: 2rem; height: 2rem;
width: 2rem; width: 2rem;
top: 0.25rem; top: 0.25rem;
color: $black; color: #000000;
display: inline-block; display: inline-block;
font-weight: 400; font-weight: 400;
......
...@@ -63,11 +63,11 @@ ...@@ -63,11 +63,11 @@
} }
select[name=payment] { select[name=payment] {
background: $danger; background: $red;
color: white; color: white;
&.paid { &.paid {
background: $success; background: $green;
} }
@media(max-width: 767px) { @media(max-width: 767px) {
......
...@@ -7,19 +7,19 @@ ...@@ -7,19 +7,19 @@
h1 { h1 {
font-size: 2rem; font-size: 2rem;
text-align: center; text-align: center;
color: $white;
} }
h2 { h2 {
text-align: center; text-align: center;
color: $white;
} }
&.paid { &.paid {
background-color: $success; background-color: $success;
color: $success-contrast;
} }
&.unpaid { &.unpaid {
background-color: $danger; background-color: $danger;
color: $danger-contrast;
} }
} }
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
label::after { label::after {
content: '*'; content: '*';
margin-left: 2px; margin-left: 2px;
color: $dark-grey; color: $text-color;
} }
} }
} }
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
} }
.alert-success { .alert-success {
color: $white; color: $success-contrast;
background-color: $success; background-color: $success;
border-color: $success-hover; border-color: $success-hover;
} }
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
} }
.alert-info { .alert-info {
color: $white; color: $info-contrast;
background-color: $info; background-color: $info;
border-color: $info-hover; border-color: $info-hover;
} }
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
} }
.alert-warning { .alert-warning {
color: $white; color: $warning-contrast;
background-color: $warning; background-color: $warning;
border-color: $warning-hover; border-color: $warning-hover;
} }
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
} }
.alert-danger, .alert-error { .alert-danger, .alert-error {
color: $white; color: $danger-contrast;
background-color: $danger; background-color: $danger;
border-color: $danger-hover; border-color: $danger-hover;
} }
......
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
.btn-primary, .btn-primary:active, .btn-primary:focus { .btn-primary, .btn-primary:active, .btn-primary:focus {
background: $preset !important; background: $preset !important;
border-color: $preset !important; border-color: $preset !important;
color: $white !important; color: $preset-contrast !important;
&:hover, &.active { &:hover, &.active {
background: $preset-hover !important; background: $preset-hover !important;
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
.btn-secondary, .btn-secondary:active, .btn-secondary:focus { .btn-secondary, .btn-secondary:active, .btn-secondary:focus {
background: $secondary !important; background: $secondary !important;
border-color: $secondary !important; border-color: $secondary !important;
color: $white !important; color: $secondary-contrast !important;
&:hover { &:hover {
background: $secondary-hover !important; background: $secondary-hover !important;
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
.btn-success, .btn-success:active, .btn-success:focus { .btn-success, .btn-success:active, .btn-success:focus {
background: $success !important; background: $success !important;
border-color: $success !important; border-color: $success !important;
color: $white !important; color: $success-contrast !important;
&:hover { &:hover {
background: $success-hover !important; background: $success-hover !important;
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
.btn-info, .btn-info:active, .btn-info:focus { .btn-info, .btn-info:active, .btn-info:focus {
background: $info !important; background: $info !important;
border-color: $info !important; border-color: $info !important;
color: $white !important; color: $info-contrast !important;