2025-summer/team-3
12
Fork 0
Code Issues Pull requests Projects Releases Activity

theming stuff in preparation for ef28 cyberpunk theme

Browse source
This commit is contained in:
Gwendolyn 2024-09-17 15:56:54 +02:00
parent b5f736a96c
commit aeb7c9dae2
9 changed files with 227 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/c3nav/editor/templates/editor/base.html
View file

@ -28,13 +28,14 @@
} }
</style> </style>
{% endif %} {% endif %}
<style>{{ active_theme.css | striptags | safe }}</style> <style>{{ active_theme.css_vars | striptags | safe }}</style>
{% compress css %} {% compress css %}
<link href="{% static 'fonts/fonts.css' %}" rel="stylesheet"> <link href="{% static 'fonts/fonts.css' %}" rel="stylesheet">
<link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet"> <link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'leaflet/leaflet.css' %}" rel="stylesheet"> <link href="{% static 'leaflet/leaflet.css' %}" rel="stylesheet">
<link href="{% static 'editor/css/editor.scss' %}" rel="stylesheet" type="text/x-scss"> <link href="{% static 'editor/css/editor.scss' %}" rel="stylesheet" type="text/x-scss">
{% endcompress %} {% endcompress %}
<style>{{ active_theme.css_extra | striptags | safe }}</style>
</head> </head>
<body{% if request.mobileclient %} data-user-data="{{ user_data_json }}" data-count-display="{{ request.changeset.count_display }}"{% if request.changeset.pk%} data-has-changeset{% endif %}{% if request.changeset.direct_editing%} data-direct-editing{% endif %}{% endif %}> <body{% if request.mobileclient %} data-user-data="{{ user_data_json }}" data-count-display="{{ request.changeset.count_display }}"{% if request.changeset.pk%} data-has-changeset{% endif %}{% if request.changeset.direct_editing%} data-direct-editing{% endif %}{% endif %}>

32
src/c3nav/mapdata/models/theme.py
View file

@ -58,22 +58,22 @@ class Theme(TitledMixin, models.Model):
def css_vars(self): def css_vars(self):
return { return {
'initial': self.color_css_initial or settings.BASE_THEME['css']['initial'], 'initial': self.color_css_initial,
'primary': self.color_css_primary or settings.BASE_THEME['css']['primary'], 'primary': self.color_css_primary,
'secondary': self.color_css_secondary or settings.BASE_THEME['css']['secondary'], 'secondary': self.color_css_secondary,
'tertiary': self.color_css_tertiary or settings.BASE_THEME['css']['tertiary'], 'tertiary': self.color_css_tertiary,
'quaternary': self.color_css_quaternary or settings.BASE_THEME['css']['quaternary'], 'quaternary': self.color_css_quaternary,
'quinary': self.color_css_quinary or settings.BASE_THEME['css']['quinary'], 'quinary': self.color_css_quinary,
'header-background': self.color_css_header_background or settings.BASE_THEME['css']['header-background'], 'header-background': self.color_css_header_background,
'header-text': self.color_css_header_text or settings.BASE_THEME['css']['header-text'], 'header-text': self.color_css_header_text,
'header-text-hover': self.color_css_header_text_hover or settings.BASE_THEME['css']['header-text-hover'], 'header-text-hover': self.color_css_header_text_hover,
'shadow': self.color_css_shadow or settings.BASE_THEME['css']['shadow'], 'shadow': self.color_css_shadow,
'overlay-background': self.color_css_overlay_background or settings.BASE_THEME['css']['overlay-background'], 'overlay-background': self.color_css_overlay_background,
'grid': self.color_css_grid or settings.BASE_THEME['css']['grid'], 'grid': self.color_css_grid,
'modal-backdrop': self.color_css_modal_backdrop or settings.BASE_THEME['css']['modal-backdrop'], 'modal-backdrop': self.color_css_modal_backdrop,
'route-dots-shadow': self.color_css_route_dots_shadow or settings.BASE_THEME['css']['route-dots-shadow'], 'route-dots-shadow': self.color_css_route_dots_shadow,
'leaflet-background': self.color_background or settings.BASE_THEME['css']['leaflet-background'], 'leaflet-background': self.color_background,
'logo': self.color_logo or settings.BASE_THEME['css']['logo'], 'logo': self.color_logo,
} }
class Meta: class Meta:

2
src/c3nav/settings.py
View file

@ -611,7 +611,7 @@ BASE_THEME = {
'obstacles_default_border': config.get('theme', 'map_obstacles_default_border', fallback='#888888'), 'obstacles_default_border': config.get('theme', 'map_obstacles_default_border', fallback='#888888'),
'highlight': config.get('theme', 'css_primary', fallback='#9b4dca'), 'highlight': config.get('theme', 'css_primary', fallback='#9b4dca'),
}, },
'css': { 'css_vars': {
'initial': config.get('theme', 'css_initial', fallback='#ffffff'), 'initial': config.get('theme', 'css_initial', fallback='#ffffff'),
'primary': config.get('theme', 'css_primary', fallback='#9b4dca'), 'primary': config.get('theme', 'css_primary', fallback='#9b4dca'),
'logo': config.get('theme', 'css_logo', fallback=None), 'logo': config.get('theme', 'css_logo', fallback=None),

241
src/c3nav/site/static/site/css/c3nav.scss
View file

@ -10,19 +10,45 @@
--color-control: var(--color-secondary); --color-control: var(--color-secondary);
--color-control-background: var(--color-initial); --color-control-background: var(--color-initial);
--color-control-background-hover: var(--color-tertiary); --color-control-background-hover: var(--color-tertiary);
--color-control-hover: var(--color-foreground);
--color-control-active: var(--color-tertiary); --color-control-active: var(--color-tertiary);
--color-control-divider: var(--color-quaternary); --color-control-divider: var(--color-quaternary);
--color-control-disabled: var(--color-quaternary); --color-control-disabled: var(--color-quaternary);
--color-icon: var(--color-secondary); --color-icon: var(--color-secondary);
--color-icon-light: var(--color-quaternary); --color-icon-light: var(--color-quaternary);
--color-button: var(--color-quaternary); --color-button: var(--color-quaternary);
--color-primary-button: var(--color-primary);
--color-button-border-hover: var(--color-quaternary); --color-button-border-hover: var(--color-quaternary);
--color-button-hover: var(--color-quinary); --color-button-hover: var(--color-quinary);
--color-focus: var(--color-foreground);
--color-map-overlay: var(--color-primary);
--color-route-dashes: #888888;
--color-pin: var(--color-foreground);
--color-pin-background: transparent;
--color-pin-background-active: var(--color-quinary);
--color-pin-active: var(--color-foreground);
--color-pin-hover: var(--color-foreground);
--color-pin-background-hover: var(--color-tertiary);
--color-shadow: var(--color-quaternary);
--shadow-size: 4px;
--border-radius: 2px;
--border-radius-small: 2px;
--border-radius-leaflet-control: 4px;
} }
@import 'milligram/milligram.sass'; @import 'milligram/milligram.sass';
::selection {
background-color: var(--color-primary);
color: white;
}
body { body {
font-weight: normal; font-weight: normal;
display: flex; display: flex;
@ -35,6 +61,7 @@ body {
right: 0; right: 0;
} }
header { header {
padding: 10px; padding: 10px;
height: 60px; height: 60px;
@ -55,6 +82,7 @@ header h1 a {
display: block; display: block;
height: 50px; height: 50px;
} }
header h1 a, header h1 a:hover { header h1 a, header h1 a:hover {
color: var(--color-primary); color: var(--color-primary);
} }
@ -93,7 +121,7 @@ header #user:hover {
color: var(--color-header-text-hover); color: var(--color-header-text-hover);
} }
input { input, textarea, select {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
} }
@ -196,6 +224,7 @@ main.account form {
max-width: 420px; max-width: 420px;
pointer-events: none; pointer-events: none;
display: flex; display: flex;
gap: 1.5rem;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
} }
@ -207,23 +236,28 @@ main.account form {
} }
#sidebar section { #sidebar section {
position: relative;
pointer-events: auto; pointer-events: auto;
background-color: var(--color-background); background-color: var(--color-background);
box-shadow: 1px 1px 3px var(--color-shadow); border-radius: var(--border-radius);
border-radius: 2px;
overflow: hidden; overflow: hidden;
margin-bottom: 10px; }
#sidebar section:not(:empty) {
border: 2px solid var(--color-control-border);
box-shadow: var(--color-shadow) 0 0 var(--shadow-size);
} }
#sidebar section > div { #sidebar section > div {
border: 0 var(--color-sidebar-border) solid; border: 0 var(--color-sidebar-border) solid;
border-top-width: 1px; border-top-width: 1px;
transition: margin-bottom 150ms, opacity 150ms; transition: margin-bottom 150ms, opacity 150ms, background-color 150ms ease-in-out, color 150ms ease-in-out;
overflow: hidden; overflow: hidden;
} }
#sidebar section > div:first-child { #sidebar section > div:first-child {
margin-top: -1px; border-top-width: 0;
} }
#search { #search {
@ -307,6 +341,10 @@ main:not([data-view^=route]) #origin-input,
opacity: 0; opacity: 0;
} }
main:not([data-view^=route]) #destination-input {
border-top-width: 0;
}
main:not([data-view=location]) #location-buttons, main:not([data-view=location]) #location-buttons,
main:not([data-view=route-search]) #route-search-buttons, main:not([data-view=route-search]) #route-search-buttons,
main:not([data-view=route-result]) #route-result-buttons { main:not([data-view=route-result]) #route-result-buttons {
@ -532,7 +570,7 @@ main.show-options #resultswrapper #route-options {
.location-answers .location.location-form-value, .location-answers a { .location-answers .location.location-form-value, .location-answers a {
margin-bottom: 5px; margin-bottom: 5px;
color: var(--color-secondary); color: var(--color-foreground);
display: block; display: block;
} }
@ -562,6 +600,11 @@ main.show-options #resultswrapper #route-options {
.location.focus { .location.focus {
background-color: var(--color-tertiary); background-color: var(--color-tertiary);
color: var(--color-focus);
.icon {
color: var(--color-focus);
}
} }
#autocomplete .location { #autocomplete .location {
@ -574,13 +617,14 @@ main.show-options #resultswrapper #route-options {
.location-label-text { .location-label-text {
line-height: 100%; line-height: 100%;
border-radius: 2px; border-radius: var(--border-radius-small);
white-space: nowrap; white-space: nowrap;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
text-align: center; text-align: center;
span { span {
line-height: 100%; line-height: 100%;
color: var(--color-overlay-text);
background-color: var(--color-overlay-background); background-color: var(--color-overlay-background);
vertical-align: 12%; vertical-align: 12%;
} }
@ -623,7 +667,7 @@ main.show-options #resultswrapper #route-options {
position: absolute; position: absolute;
top: 0; top: 0;
left: 1px; left: 1px;
content: "\e8b6"; /* unicode code point for the "seach" ligature, so android 4.3.3 gets it */ content: "\e8b6"; /* unicode code point for the "search" ligature, so android 4.3.3 gets it */
color: var(--color-icon-light); color: var(--color-icon-light);
transition: color 150ms; transition: color 150ms;
} }
@ -681,9 +725,9 @@ main[data-view^=route] button.random, .locationinput:not(.empty) button.random {
#route-dots { #route-dots {
position: absolute; position: absolute;
top: 53px; top: 43px;
left: 25px; left: 15px;
text-shadow: 2px 0 1px var(--color-route-dots-shadow), -2px 0 1px var(--color-route-dots-shadow); text-shadow: 2px 0 1px var(--color-route-dashes-shadow), -2px 0 1px var(--color-route-dashes-shadow);
transition: top 150ms, opacity 150ms, color 150ms, transform 150ms; transition: top 150ms, opacity 150ms, color 150ms, transform 150ms;
color: var(--color-route-dots); color: var(--color-route-dots);
pointer-events: none; pointer-events: none;
@ -734,7 +778,7 @@ main:not([data-view=route-result]) #route-dots {
.location-popup .leaflet-popup-content { .location-popup .leaflet-popup-content {
font-size: 16px; font-size: 16px;
color: var(--color-secondary); color: var(--color-foreground);
overflow: hidden; overflow: hidden;
line-height: 1.6; line-height: 1.6;
margin: 15px 10px 10px; margin: 15px 10px 10px;
@ -743,10 +787,51 @@ main:not([data-view=route-result]) #route-dots {
.leaflet-popup-content-wrapper, .leaflet-popup-tip { .leaflet-popup-content-wrapper, .leaflet-popup-tip {
background-color: var(--color-background); background-color: var(--color-background);
box-shadow: 1px 1px 3px var(--color-shadow); box-shadow: var(--color-shadow) 0 0 var(--shadow-size);
border-radius: 2px;
} }
.leaflet-popup-content-wrapper {
border-radius: var(--border-radius-small);
}
button, .button {
color: var(--color-background);
background-color: var(--color-primary-button);
border-color: var(--color-primary-button);
&:hover, &:active {
background-color: var(--color-button-hover);
border-color: var(--color-button-hover);
color: var(--color-background);
}
&.button-clear {
color: var(--color-primary-button);
background-color: transparent;
border-color: transparent;
&:hover, &:active {
color: var(--color-button-hover);
background-color: transparent;
border-color: transparent;
}
}
&.button-outline {
color: var(--color-primary-button);
background-color: transparent;
border-color: var(--color-primary-button);
&:hover, &:active {
color: var(--color-button-hover);
background-color: transparent;
border-color: var(--color-button-hover);
}
}
}
.location-popup { .location-popup {
.leaflet-popup-content-wrapper { .leaflet-popup-content-wrapper {
padding: 0; padding: 0;
@ -891,8 +976,12 @@ main:not([data-view=route-result]) #route-summary {
height: 37px; height: 37px;
border-width: 0; border-width: 0;
font-size: 36px; font-size: 36px;
color: var(--color-button);
line-height: 1; line-height: 1;
color: var(--color-button);
&:hover {
color: var(--color-button-hover);
}
} }
@media not all and (min-height: 700px) and (min-width: 1100px) { @media not all and (min-height: 700px) and (min-width: 1100px) {
@ -941,7 +1030,8 @@ main:not([data-view=route-result]) #route-summary {
.leaflet-control-levels a.current { .leaflet-control-levels a.current {
font-weight: bold; font-weight: bold;
background-color: var(--color-control-active); color: var(--color-control-active);
background-color: var(--color-control-background-active);
} }
.leaflet-container { .leaflet-container {
@ -950,14 +1040,14 @@ main:not([data-view=route-result]) #route-summary {
.leaflet-container .leaflet-control-attribution { .leaflet-container .leaflet-control-attribution {
background-color: var(--color-overlay-background); background-color: var(--color-overlay-background);
color: var(--color-secondary); color: var(--color-foreground);
a { a {
color: var(--color-primary); color: var(--color-primary);
} }
a:hover { a:hover {
color: var(--color-secondary); color: var(--color-foreground);
text-decoration: none; text-decoration: none;
} }
} }
@ -966,8 +1056,12 @@ main:not([data-view=route-result]) #route-summary {
font-size: 20px; font-size: 20px;
} }
.leaflet-bar { .leaflet-bar, .leaflet-control-key {
box-shadow: 0 1px 5px var(--color-control-shadow); overflow: hidden;
background-color: var(--color-control-background);
border-radius: var(--border-radius-leaflet-control);
border: 2px solid var(--color-control-border);
box-shadow: var(--color-control-shadow) 0 0 var(--shadow-size);
} }
.leaflet-bar a { .leaflet-bar a {
@ -976,9 +1070,13 @@ main:not([data-view=route-result]) #route-summary {
border-bottom-color: var(--color-control-divider); border-bottom-color: var(--color-control-divider);
} }
.leaflet-bar a:first-child, .leaflet-bar a:last-child {
border-radius: 0;
}
.leaflet-bar a:hover { .leaflet-bar a:hover {
background-color: var(--color-control-background-hover); background-color: var(--color-control-background-hover);
color: var(--color-control); color: var(--color-control-hover);
border-bottom-color: var(--color-control-divider); border-bottom-color: var(--color-control-divider);
} }
@ -986,12 +1084,12 @@ main:not([data-view=route-result]) #route-summary {
color: var(--color-control); color: var(--color-control);
} }
.leaflet-bar a.leaflet-disabled { .leaflet-bar a.leaflet-disabled, {
color: var(--color-control-disabled); color: var(--color-control-disabled);
background-color: var(--color-control-background); // todo: special disabled background color #f4f4f4 ? background-color: var(--color-control-background); // todo: special disabled background color #f4f4f4 ?
} }
.leaflet-bar .control-disabled, .leaflet-bar .control-disabled:hover, .leaflet-bar .control-disabled:focus { .leaflet-bar .control-disabled, .leaflet-bar .control-disabled:focus {
color: var(--color-control-disabled); color: var(--color-control-disabled);
// TODO: is this even used? // TODO: is this even used?
} }
@ -1086,8 +1184,9 @@ main:not([data-view=route-result]) #route-summary {
} }
#modal-content { #modal-content {
box-shadow: 1px 1px 3px var(--color-shadow); box-shadow: var(--color-shadow) 0 0 var(--shadow-size);
border-radius: 2px; border: 2px solid var(--color-modal-border);
border-radius: var(--border-radius);
background-color: var(--color-background); background-color: var(--color-background);
width: 380px; width: 380px;
min-height: 150px; min-height: 150px;
@ -1169,34 +1268,34 @@ ul.messages {
ul.messages li { ul.messages li {
padding: 1.0rem; padding: 1.0rem;
border-radius: .4rem; border-radius: var(--border-radius);
border: 0.1rem solid #666666;
background-color: #EEEEEE;
pointer-events: auto; pointer-events: auto;
--message-color-bg: var(--color-background);
--message-color-fg: var(--color-foreground);
--message-color-border: var(--message-color-fg);
--message-color-shadow: var(--message-color-fg);
color: var(--message-color-fg);
box-shadow: var(--message-color-shadow) 0 0 calc(var(--shadow-size) * 3), inset var(--message-color-shadow) 0 0 var(--shadow-size);
border: 2px solid var(--message-color-border);
background-color: var(--message-color-bg);
} }
ul.messages li.alert-info { ul.messages li.alert-info {
color: #006688; --message-color-fg: #00dbff;
border-color: #006688;
background-color: #DDE4FF;
} }
ul.messages li.alert-success { ul.messages li.alert-success {
color: #338800; --message-color-fg: #56ff27;
border-color: #339900;
background-color: #E4FFDD;
} }
ul.messages li.alert-warning { ul.messages li.alert-warning {
color: #CC6600; --message-color-fg: #ff8f3f;
border-color: #FF9900;
background-color: #FFFFDD;
} }
ul.messages li.alert-danger { ul.messages li.alert-danger {
color: #CC0000; --message-color-fg: #ff4677;
border-color: #CC0000;
background-color: #FFEEEE;
} }
.app-ads { .app-ads {
@ -1212,8 +1311,8 @@ ul.messages li.alert-danger {
.app-ads div { .app-ads div {
background-color: var(--color-background); background-color: var(--color-background);
box-shadow: 1px 1px 3px var(--color-shadow); box-shadow: 0 0 var(--shadow-size) var(--color-shadow);
border-radius: 2px; border-radius: var(--border-radius-small);
overflow: hidden; overflow: hidden;
display: inline-block; display: inline-block;
margin: 0 10px 25px; margin: 0 10px 25px;
@ -1347,11 +1446,13 @@ main .narrow form button, main .narrow form .button {
width: 100%; width: 100%;
} }
main form > p, #modal form > p { main form, #modal form {
margin-bottom: 15px; > p {
margin-bottom: 15px;
> :last-child { > :last-child {
margin-bottom: 0; margin-bottom: 0;
}
} }
.helptext { .helptext {
@ -1361,9 +1462,14 @@ main form > p, #modal form > p {
color: var(--color-helptext); color: var(--color-helptext);
} }
input[type=text], textarea {
border: 1px solid var(--color-border);
}
textarea { textarea {
resize: none; resize: none;
height: 100px; height: 100px;
color: var(--color-foreground);
} }
select[multiple] { select[multiple] {
@ -1375,6 +1481,7 @@ main form > p, #modal form > p {
} }
} }
.user-permissions-form label { .user-permissions-form label {
font-weight: 400; font-weight: 400;
width: auto; width: auto;
@ -1562,9 +1669,6 @@ blink {
} }
.leaflet-control-key { .leaflet-control-key {
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 1px 5px var(--color-control-shadow);
background-clip: padding-box; background-clip: padding-box;
&.leaflet-control-key-expanded > .collapsed-toggle { &.leaflet-control-key-expanded > .collapsed-toggle {
@ -1576,6 +1680,7 @@ blink {
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
text-align: center; text-align: center;
&::before { &::before {
font-family: 'Material Symbols Outlined'; font-family: 'Material Symbols Outlined';
content: 'legend_toggle'; content: 'legend_toggle';
@ -1587,24 +1692,32 @@ blink {
> .pin-toggle { > .pin-toggle {
display: none; display: none;
position: absolute; position: absolute;
right: 0.5rem;
color: black;
font-size: 1.5rem;
top: 0.5rem; top: 0.5rem;
right: 0.5rem;
color: var(--color-pin);
font-size: 1.5rem;
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
line-height: 2.2rem; line-height: 2.2rem;
box-shadow: inset 0 0 2px black; border-radius: var(--border-radius-leaflet-control);
border-radius: 0.5rem;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
background: var(--color-pin-background);
border: 1px solid var(--color-pin-border);
box-shadow: inset 0 0 2px black;
&.active { &.active {
background: #DCDCDC; background: var(--color-pin-background-active);
color: var(--color-pin-active);
border-color: var(--color-pin-border-active);
box-shadow: inset var(--color-shadow) 0 0 var(--shadow-size);
} }
&:hover { &:hover {
background: #D0D0D0; color: var(--color-pin-hover);
background: var(--color-pin-background-hover);
border-color: var(--color-pin-border-hover);
} }
} }
@ -1614,17 +1727,21 @@ blink {
> .content { > .content {
display: none; display: none;
padding: 1rem; padding: 1rem 3rem 1rem 1rem;
gap: 1rem; gap: 1rem;
grid-template-columns: 26px 1fr; grid-template-columns: 2rem 1fr;
> .key { > .key {
display: grid; display: grid;
grid-column: span 2; grid-column: span 2;
grid-template-columns: subgrid; grid-template-columns: subgrid;
line-height: 2rem;
> .key-color { > .key-color {
width: 100%; border-radius: var(--border-radius-small);
height: 100%; width: 2rem;
height: 2rem;
box-shadow: var(--color-foreground) 0 0 var(var(--shadow-size) / 2), inset var(--color-foreground) 0 0 2px;
} }
} }
} }

14
src/c3nav/site/static/site/js/c3nav.js
View file

@ -496,7 +496,7 @@ c3nav = {
if (data.geometry && data.level) { if (data.geometry && data.level) {
L.geoJSON(data.geometry, { L.geoJSON(data.geometry, {
style: { style: {
color: 'var(--color-primary)', color: 'var(--color-map-overlay)',
fillOpacity: 0.1, fillOpacity: 0.1,
} }
}).addTo(c3nav._routeLayers[data.level]); }).addTo(c3nav._routeLayers[data.level]);
@ -657,13 +657,14 @@ c3nav = {
point = [destination[0] + Math.cos(angle) * offset, destination[1] + Math.sin(angle) * offset]; point = [destination[0] + Math.cos(angle) * offset, destination[1] + Math.sin(angle) * offset];
return [origin, point, destination]; return [origin, point, destination];
}, },
_add_line_to_route: function (level, coords, gray, link_to_level) { _add_line_to_route: function (level, coords, dots, link_to_level) {
if (coords.length < 2) return; if (coords.length < 2) return;
var latlngs = L.GeoJSON.coordsToLatLngs(c3nav._smooth_line(coords)), var latlngs = L.GeoJSON.coordsToLatLngs(c3nav._smooth_line(coords)),
routeLayer = c3nav._routeLayers[level]; routeLayer = c3nav._routeLayers[level];
line = L.polyline(latlngs, { line = L.polyline(latlngs, {
color: gray ? '#888888' : 'var(--color-primary)', className: dots ? 'c3nav-route-dashes' : 'c3nav-route-line',
dashArray: (gray || link_to_level) ? '7' : null, color: dots ? 'var(--color-route-dashes)' : 'var(--color-map-overlay)',
dashArray: (dots || link_to_level) ? '7' : null,
interactive: false, interactive: false,
smoothFactor: 0.5 smoothFactor: 0.5
}).addTo(routeLayer); }).addTo(routeLayer);
@ -1495,7 +1496,8 @@ c3nav = {
c3nav_api.post('settings/theme/?id=' + id); c3nav_api.post('settings/theme/?id=' + id);
localStorageWrapper.setItem('c3nav-theme', c3nav.theme); // TODO: instead (or additionally?) do a request to save it in the session! localStorageWrapper.setItem('c3nav-theme', c3nav.theme); // TODO: instead (or additionally?) do a request to save it in the session!
} }
document.querySelector('#c3nav-theme-vars').innerText = theme.css; document.querySelector('#c3nav-theme-css-vars').innerText = theme.css_vars;
document.querySelector('#c3nav-theme-css-extra').innerText = theme.css_extra;
document.querySelector('#theme-color-meta-dark').content = theme.theme_color_dark; document.querySelector('#theme-color-meta-dark').content = theme.theme_color_dark;
document.querySelector('#theme-color-meta-light').content = theme.theme_color_light; document.querySelector('#theme-color-meta-light').content = theme.theme_color_light;
@ -1782,7 +1784,7 @@ c3nav = {
if (data.geometry.type === "Point") return; if (data.geometry.type === "Point") return;
L.geoJSON(data.geometry, { L.geoJSON(data.geometry, {
style: { style: {
color: 'var(--color-primary)', color: 'var(--color-map-overlay)',
fillOpacity: 0.2, fillOpacity: 0.2,
interactive: false, interactive: false,
} }

3
src/c3nav/site/templates/site/base.html
View file

@ -31,7 +31,7 @@
} }
</style> </style>
{% endif %} {% endif %}
<style id="c3nav-theme-vars">{{ active_theme.css | striptags | safe }}</style> <style id="c3nav-theme-css-vars">{{ active_theme.css_vars | striptags | safe }}</style>
{{ themes|json_script:"c3nav-themes" }} {{ themes|json_script:"c3nav-themes" }}
{{ active_theme_id|json_script:"c3nav-active-theme" }} {{ active_theme_id|json_script:"c3nav-active-theme" }}
{% compress css %} {% compress css %}
@ -41,6 +41,7 @@
<link href="{% static 'material-symbols/material-symbols.css' %}" rel="stylesheet"> <link href="{% static 'material-symbols/material-symbols.css' %}" rel="stylesheet">
<link href="{% static 'site/css/c3nav.scss' %}" rel="stylesheet" type="text/x-scss"> <link href="{% static 'site/css/c3nav.scss' %}" rel="stylesheet" type="text/x-scss">
{% endcompress %} {% endcompress %}
<style id="c3nav-theme-css-extra">{{ active_theme.css_extra | striptags | safe }}</style>
{% block head %} {% block head %}
{% endblock %} {% endblock %}
{% if header_logo and header_logo_mask_mode %} {% if header_logo and header_logo_mask_mode %}

6
src/c3nav/site/templates/site/map.html
View file

@ -118,7 +118,6 @@
</section> </section>
<section id="sidebar"> <section id="sidebar">
<section id="search" class="loading"> <section id="search" class="loading">
<div class="loader"></div>
<div class="location locationinput empty" id="origin-input"> <div class="location locationinput empty" id="origin-input">
<i class="icon material-symbols">place</i> <i class="icon material-symbols">place</i>
<input type="text" autocomplete="off" spellcheck="false" placeholder="{% trans 'Search any location…' %}"> <input type="text" autocomplete="off" spellcheck="false" placeholder="{% trans 'Search any location…' %}">
@ -150,11 +149,11 @@
</button> </button>
</div> </div>
<div id="route-summary"> <div id="route-summary">
<div class="loader"></div>
<i class="icon material-symbols">directions</i> <i class="icon material-symbols">directions</i>
<span></span> <span></span>
<small><em></em></small> <small><em></em></small>
<button class="button-clear options material-symbols">settings</button> <button class="button-clear options material-symbols">settings</button>
<div class="loader"></div>
</div> </div>
<div class="buttons" id="route-search-buttons"> <div class="buttons" id="route-search-buttons">
<button class="button-clear swap"> <button class="button-clear swap">
@ -176,11 +175,11 @@
{% trans 'Details' %} {% trans 'Details' %}
</button> </button>
</div> </div>
<div class="loader"></div>
</section> </section>
<div id="resultswrapper"> <div id="resultswrapper">
<section id="autocomplete"></section> <section id="autocomplete"></section>
<section id="location-details" class="details"> <section id="location-details" class="details">
<div class="loader"></div>
<div class="details-head"> <div class="details-head">
<button class="button close button-clear material-symbols float-right">close</button> <button class="button close button-clear material-symbols float-right">close</button>
<h2>{% trans 'Details' %}</h2> <h2>{% trans 'Details' %}</h2>
@ -196,6 +195,7 @@
{% trans 'Open in Editor' %} {% trans 'Open in Editor' %}
</a> </a>
</div> </div>
<div class="loader"></div>
</section> </section>
<section id="route-details" class="details"> <section id="route-details" class="details">
<div class="details-head"> <div class="details-head">

26
src/c3nav/site/themes.py
View file

@ -5,7 +5,8 @@ from c3nav.mapdata.utils.cache.cache_decorator import mapdata_cache
def css_vars_as_str(vars): def css_vars_as_str(vars):
css_str = '' css_str = ''
for name, value in vars.items(): for name, value in vars.items():
css_str += f'--color-{name}: {value};' if name is not None and name != '':
css_str += f'--color-{name}: {value};'
return css_str return css_str
@ -44,14 +45,14 @@ def make_themes(theme_models):
from django.utils.translation import gettext_lazy as _ from django.utils.translation import gettext_lazy as _
themes = {} themes = {}
base_css_vars = settings.BASE_THEME['css'].copy() base_css_vars = settings.BASE_THEME['css_vars'].copy()
modify_vars(base_css_vars) modify_vars(base_css_vars)
primary_color = base_css_vars['primary'] primary_color = base_css_vars['primary']
if settings.BASE_THEME['randomize_primary_color']: if settings.BASE_THEME['randomize_primary_color']:
del base_css_vars['primary'] del base_css_vars['primary']
base_theme_vars_str = css_vars_as_str(base_css_vars) base_theme_vars_str = css_vars_as_str(base_css_vars)
base_theme = { base_theme = {
'css_code': ':root{%s}' % base_theme_vars_str, 'css_vars': ':root{%s}' % base_theme_vars_str,
'theme_color': base_css_vars['header-background'], 'theme_color': base_css_vars['header-background'],
'randomize_primary_color': settings.BASE_THEME['randomize_primary_color'], 'randomize_primary_color': settings.BASE_THEME['randomize_primary_color'],
'primary_color': primary_color, 'primary_color': primary_color,
@ -66,14 +67,15 @@ def make_themes(theme_models):
for theme in theme_models: for theme in theme_models:
css_vars = theme.css_vars() css_vars = theme.css_vars()
modify_vars(css_vars) modify_vars(css_vars)
primary_color = css_vars['primary'] primary_color = css_vars['primary'] if 'primary' in css_vars else base_theme['primary_color']
if theme.randomize_primary_color: if theme.randomize_primary_color:
del css_vars['primary'] del css_vars['primary']
css_vars_str = css_vars_as_str(css_vars) css_vars_str = css_vars_as_str(css_vars)
css_code = (':root{%s}' % css_vars_str) + theme.extra_css css_code = (':root{%s}' % css_vars_str)
themes[theme.pk] = { themes[theme.pk] = {
'name': theme.title, 'name': theme.title,
'css': css_code, 'css_vars': css_code,
'css_extra': theme.extra_css,
'funky': theme.funky, 'funky': theme.funky,
'theme_color_dark': theme.color_css_header_background, 'theme_color_dark': theme.color_css_header_background,
'theme_color_light': theme.color_css_header_background, 'theme_color_light': theme.color_css_header_background,
@ -82,7 +84,8 @@ def make_themes(theme_models):
} }
if theme.default: if theme.default:
default_theme = { default_theme = {
'css_code': css_code, 'css_vars': css_code,
'css_extra': theme.extra_css,
'theme_color': css_vars['header-background'], 'theme_color': css_vars['header-background'],
'randomize_primary_color': theme.randomize_primary_color, 'randomize_primary_color': theme.randomize_primary_color,
'primary_color': primary_color, 'primary_color': primary_color,
@ -95,17 +98,18 @@ def make_themes(theme_models):
if default_dark is not None and default_light is not None: if default_dark is not None and default_light is not None:
name = _('Automatic') name = _('Automatic')
css_code = ('@media(prefers-color-scheme:light){%s@media(prefers-color-scheme:dark){%s}' css_code = ('@media(prefers-color-scheme:light){%s@media(prefers-color-scheme:dark){%s}'
% (default_light['css_code'], default_dark['css_code'])) % (default_light['css_vars'], default_dark['css_vars']))
randomize_primary_color = default_dark['randomize_primary_color'] or default_light['randomize_primary_color'] randomize_primary_color = default_dark['randomize_primary_color'] or default_light['randomize_primary_color']
else: else:
name = _('Default') name = _('Default')
default_theme = default_light or default_dark default_theme = default_light or default_dark
css_code = default_theme['css_code'] css_code = default_theme['css_vars']
randomize_primary_color = default_theme['randomize_primary_color'] randomize_primary_color = default_theme['randomize_primary_color']
themes[0] = { themes[0] = {
'name': name, 'name': name,
'css': css_code, 'css_vars': css_code,
'css_extra': '',
'funky': False, 'funky': False,
'theme_color_dark': default_dark['theme_color'] if default_dark is not None else default_light['theme_color'], 'theme_color_dark': default_dark['theme_color'] if default_dark is not None else default_light['theme_color'],
'theme_color_light': default_light['theme_color'] if default_light is not None else default_dark['theme_color'], 'theme_color_light': default_light['theme_color'] if default_light is not None else default_dark['theme_color'],
@ -135,7 +139,7 @@ def random_color():
def get_random_primary_color(request): def get_random_primary_color(request):
if settings.PRIMARY_COLOR_RANDOMISATION['mode'] == 'off': if settings.PRIMARY_COLOR_RANDOMISATION['mode'] == 'off':
return settings.BASE_THEME['css']['primary'] return settings.BASE_THEME['css_vars']['primary']
elif settings.PRIMARY_COLOR_RANDOMISATION['mode'] == 'request': elif settings.PRIMARY_COLOR_RANDOMISATION['mode'] == 'request':
return random_color() return random_color()
elif settings.PRIMARY_COLOR_RANDOMISATION['mode'] == 'session': elif settings.PRIMARY_COLOR_RANDOMISATION['mode'] == 'session':

44
src/c3nav/static/milligram/_Button.sass
View file

@ -7,10 +7,8 @@ button,
input[type='button'], input[type='button'],
input[type='reset'], input[type='reset'],
input[type='submit'] input[type='submit']
background-color: var(--color-primary) border: .1rem solid
border: .1rem solid var(--color-primary)
border-radius: .4rem border-radius: .4rem
color: var(--color-initial)
cursor: pointer cursor: pointer
display: inline-block display: inline-block
font-size: 1.1rem font-size: 1.1rem
@ -26,50 +24,10 @@ input[type='submit']
&:focus, &:focus,
&:hover &:hover
background-color: var(--color-secondary)
border-color: var(--color-secondary)
color: var(--color-initial)
outline: 0 outline: 0
&[disabled] &[disabled]
cursor: default cursor: default
opacity: .5 opacity: .5
&:focus,
&:hover
background-color: var(--color-primary)
border-color: var(--color-primary)
&.button-outline
background-color: transparent
color: var(--color-primary)
&:focus,
&:hover
background-color: transparent
border-color: var(--color-secondary)
color: var(--color-secondary)
&[disabled]
&:focus,
&:hover
border-color: inherit
color: var(--color-primary)
&.button-clear
background-color: transparent
border-color: transparent
color: var(--color-primary)
&:focus,
&:hover
background-color: transparent
border-color: transparent
color: var(--color-secondary)
&[disabled]
&:focus,
&:hover
color: var(--color-primary)