UI: Implement Web Assets' theme system, and add 'dark' theme #103972
@ -1,6 +1,7 @@
|
|||||||
/* Theme-system mixins to make dynamic location colours contrast work with dark
|
/* Theme-system mixins to make dynamic location colours contrast work with dark
|
||||||
* and light themes. */
|
* and light themes. */
|
||||||
=theme-dark-schedule
|
=theme-dark-schedule
|
||||||
|
--event-detail-location-color-l: 65%
|
||||||
--schedule-container-location-color-l: 65%
|
--schedule-container-location-color-l: 65%
|
||||||
--schedule-filters-container-location-bg-color-l: 20%
|
--schedule-filters-container-location-bg-color-l: 20%
|
||||||
--schedule-filters-container-location-color-l: 60%
|
--schedule-filters-container-location-color-l: 60%
|
||||||
@ -15,6 +16,7 @@
|
|||||||
|
|
||||||
|
|
||||||
=theme-light-schedule
|
=theme-light-schedule
|
||||||
|
--event-detail-location-color-l: 35%
|
||||||
--schedule-container-location-color-l: 35%
|
--schedule-container-location-color-l: 35%
|
||||||
--schedule-filters-container-location-bg-color-l: 10%
|
--schedule-filters-container-location-bg-color-l: 10%
|
||||||
--schedule-filters-container-location-color-l: 50%
|
--schedule-filters-container-location-color-l: 50%
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
| {% if object.status == 'accepted' %}
|
| {% if object.status == 'accepted' %}
|
||||||
div.ml-4
|
div.ml-4
|
||||||
small.text-muted.d-block Location
|
small.text-muted.d-block Location
|
||||||
span(style="color: hsl(var(--location-hue-{{ object.location.slug }}), 50%, 50%);")
|
span(style="color: hsl(var(--location-hue-{{ object.location.slug }}), 80%, var(--event-detail-location-color-l));")
|
||||||
| {% if object.location.slug %}
|
| {% if object.location.slug %}
|
||||||
| {{ object.location.slug | title }}
|
| {{ object.location.slug | title }}
|
||||||
| {% else %}
|
| {% else %}
|
||||||
|
@ -78,7 +78,7 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
|
|||||||
ul.event-description
|
ul.event-description
|
||||||
| {% if object.location.slug %}
|
| {% if object.location.slug %}
|
||||||
li.event-location(
|
li.event-location(
|
||||||
style="color: hsl(var(--location-hue-{{ object.location.slug }}), 80%, 35%);")
|
style="color: hsl(var(--location-hue-{{ object.location.slug }}), 80%, var(--event-detail-location-color-l));")
|
||||||
| {{ object.location.slug | upper }}
|
| {{ object.location.slug | upper }}
|
||||||
| {% endif %}
|
| {% endif %}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user