Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
thalia
concrexit
Commits
86c2e56e
Commit
86c2e56e
authored
Mar 04, 2020
by
Sébastiaan Versteeg
Committed by
Luc Knol
Mar 04, 2020
Browse files
Add dark mode styling
parent
7255f425
Changes
34
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 c
olor
s
See CalenderJSSerializer, customised c
lasse
s
"""
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
:
$w
hite
;
color
:
$w
arning-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
:
$w
hite
!
important
;
color
:
$w
arning-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
:
$
prese
t
;
background-color
:
$
grey
;
color
:
$
card-background-hover-contras
t
;
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
:
$
prese
t
;
color
:
$
card-background-hover-contras
t
;
}
&
.collapsed
{
color
:
$
black
;
background-color
:
$
light-grey
;
color
:
$
card-background-contrast
;
background-color
:
$
card-background
;
a
{
color
:
$
black
;
color
:
$
card-background-contrast
;
}
&
:hover
{
color
:
$
prese
t
;
background-color
:
$
grey
;
color
:
$
card-background-hover-contras
t
;
background-color
:
$
card-background-hover
;
a
{
color
:
$
prese
t
;
color
:
$
card-background-hover-contras
t
;
}
}
}
...
...
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
;