Skip to content

GitLab

Commit 86c2e56e authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg Committed by Luc Knol
Browse files

Add dark mode styling

parent 7255f425
Hide whitespace changes
Inline Side-by-side
website/announcements/static/announcements/css/style.scss
View file @ 86c2e56e
#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 {
......
website/events/api/serializers.py
View file @ 86c2e56e
......@@ -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})
......
website/events/static/events/css/admin.scss
View file @ 86c2e56e
......@@ -49,11 +49,11 @@
}
select[name=payment] {
background: $danger;
background: $red;
color: white;
&.paid {
background: $success;
background: $green;
}
@media(max-width: 767px) {
......
website/events/static/events/css/style.scss
View file @ 86c2e56e
......@@ -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;
}
}
}
......
website/events/static/events/js/listview.js
View file @ 86c2e56e
......@@ -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');
......
website/members/api/serializers.py
View file @ 86c2e56e
......@@ -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):
......
website/partners/api/serializers.py
View file @ 86c2e56e
......@@ -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."""
......
website/partners/static/partners/css/style.scss
View file @ 86c2e56e
#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;
......
website/payments/static/payments/css/style.scss
View file @ 86c2e56e
......@@ -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;
......
website/pizzas/static/pizzas/css/admin.scss
View file @ 86c2e56e
......@@ -63,11 +63,11 @@
}
select[name=payment] {
background: $danger;
background: $red;
color: white;
&.paid {
background: $success;
background: $green;
}
@media(max-width: 767px) {
......
website/pizzas/static/pizzas/css/style.scss
View file @ 86c2e56e
......@@ -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;
}
}
website/registrations/static/registrations/css/style.scss
View file @ 86c2e56e
......@@ -3,7 +3,7 @@
label::after {
content: '*';
margin-left: 2px;
color: $dark-grey;
color: $text-color;
}
}
}
website/thaliawebsite/static/css/_alerts.scss
View file @ 86c2e56e
......@@ -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;
}
......
website/thaliawebsite/static/css/_buttons.scss
View file @ 86c2e56e
......@@ -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;
......
website/thaliawebsite/static/css/_cards.scss
View file @ 86c2e56e
......@@ -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;
}
}
}
......
website/thaliawebsite/static/css/_forms.scss
View file @ 86c2e56e
.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;
}
}
website/thaliawebsite/static/css/_navs.scss
View file @ 86c2e56e
......@@ -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 {
......
website/thaliawebsite/static/css/_progress.scss
View file @ 86c2e56e
......@@ -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;
......
website/thaliawebsite/static/css/_typography.scss
View file @ 86c2e56e
......@@ -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;
}