theming stuff in preparation for ef28 cyberpunk theme
This commit is contained in:
Gwendolyn
parent
b5f736a96c
commit
aeb7c9dae2
9 changed files with 227 additions and 144 deletions
|
|
@ -28,13 +28,14 @@
|
|||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
<style>{{ active_theme.css | striptags | safe }}</style>
|
||||
<style>{{ active_theme.css_vars | striptags | safe }}</style>
|
||||
{% compress css %}
|
||||
<link href="{% static 'fonts/fonts.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'leaflet/leaflet.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'editor/css/editor.scss' %}" rel="stylesheet" type="text/x-scss">
|
||||
{% endcompress %}
|
||||
<style>{{ active_theme.css_extra | striptags | safe }}</style>
|
||||
</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 %}>
|
||||
|
||||
|
|
|
|||
|
|
@ -58,22 +58,22 @@ class Theme(TitledMixin, models.Model):
|
|||
|
||||
def css_vars(self):
|
||||
return {
|
||||
'initial': self.color_css_initial or settings.BASE_THEME['css']['initial'],
|
||||
'primary': self.color_css_primary or settings.BASE_THEME['css']['primary'],
|
||||
'secondary': self.color_css_secondary or settings.BASE_THEME['css']['secondary'],
|
||||
'tertiary': self.color_css_tertiary or settings.BASE_THEME['css']['tertiary'],
|
||||
'quaternary': self.color_css_quaternary or settings.BASE_THEME['css']['quaternary'],
|
||||
'quinary': self.color_css_quinary or settings.BASE_THEME['css']['quinary'],
|
||||
'header-background': self.color_css_header_background or settings.BASE_THEME['css']['header-background'],
|
||||
'header-text': self.color_css_header_text or settings.BASE_THEME['css']['header-text'],
|
||||
'header-text-hover': self.color_css_header_text_hover or settings.BASE_THEME['css']['header-text-hover'],
|
||||
'shadow': self.color_css_shadow or settings.BASE_THEME['css']['shadow'],
|
||||
'overlay-background': self.color_css_overlay_background or settings.BASE_THEME['css']['overlay-background'],
|
||||
'grid': self.color_css_grid or settings.BASE_THEME['css']['grid'],
|
||||
'modal-backdrop': self.color_css_modal_backdrop or settings.BASE_THEME['css']['modal-backdrop'],
|
||||
'route-dots-shadow': self.color_css_route_dots_shadow or settings.BASE_THEME['css']['route-dots-shadow'],
|
||||
'leaflet-background': self.color_background or settings.BASE_THEME['css']['leaflet-background'],
|
||||
'logo': self.color_logo or settings.BASE_THEME['css']['logo'],
|
||||
'initial': self.color_css_initial,
|
||||
'primary': self.color_css_primary,
|
||||
'secondary': self.color_css_secondary,
|
||||
'tertiary': self.color_css_tertiary,
|
||||
'quaternary': self.color_css_quaternary,
|
||||
'quinary': self.color_css_quinary,
|
||||
'header-background': self.color_css_header_background,
|
||||
'header-text': self.color_css_header_text,
|
||||
'header-text-hover': self.color_css_header_text_hover,
|
||||
'shadow': self.color_css_shadow,
|
||||
'overlay-background': self.color_css_overlay_background,
|
||||
'grid': self.color_css_grid,
|
||||
'modal-backdrop': self.color_css_modal_backdrop,
|
||||
'route-dots-shadow': self.color_css_route_dots_shadow,
|
||||
'leaflet-background': self.color_background,
|
||||
'logo': self.color_logo,
|
||||
}
|
||||
|
||||
class Meta:
|
||||
|
|
|
|||
|
|
@ -611,7 +611,7 @@ BASE_THEME = {
|
|||
'obstacles_default_border': config.get('theme', 'map_obstacles_default_border', fallback='#888888'),
|
||||
'highlight': config.get('theme', 'css_primary', fallback='#9b4dca'),
|
||||
},
|
||||
'css': {
|
||||
'css_vars': {
|
||||
'initial': config.get('theme', 'css_initial', fallback='#ffffff'),
|
||||
'primary': config.get('theme', 'css_primary', fallback='#9b4dca'),
|
||||
'logo': config.get('theme', 'css_logo', fallback=None),
|
||||
|
|
|
|||
|
|
@ -10,19 +10,45 @@
|
|||
--color-control: var(--color-secondary);
|
||||
--color-control-background: var(--color-initial);
|
||||
--color-control-background-hover: var(--color-tertiary);
|
||||
--color-control-hover: var(--color-foreground);
|
||||
--color-control-active: var(--color-tertiary);
|
||||
--color-control-divider: var(--color-quaternary);
|
||||
--color-control-disabled: var(--color-quaternary);
|
||||
--color-icon: var(--color-secondary);
|
||||
--color-icon-light: var(--color-quaternary);
|
||||
--color-button: var(--color-quaternary);
|
||||
--color-primary-button: var(--color-primary);
|
||||
--color-button-border-hover: var(--color-quaternary);
|
||||
--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';
|
||||
|
||||
::selection {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
body {
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
|
|
@ -35,6 +61,7 @@ body {
|
|||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
header {
|
||||
padding: 10px;
|
||||
height: 60px;
|
||||
|
|
@ -55,6 +82,7 @@ header h1 a {
|
|||
display: block;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
header h1 a, header h1 a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
|
@ -93,7 +121,7 @@ header #user:hover {
|
|||
color: var(--color-header-text-hover);
|
||||
}
|
||||
|
||||
input {
|
||||
input, textarea, select {
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -196,6 +224,7 @@ main.account form {
|
|||
max-width: 420px;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -207,23 +236,28 @@ main.account form {
|
|||
}
|
||||
|
||||
#sidebar section {
|
||||
position: relative;
|
||||
pointer-events: auto;
|
||||
background-color: var(--color-background);
|
||||
box-shadow: 1px 1px 3px var(--color-shadow);
|
||||
border-radius: 2px;
|
||||
border-radius: var(--border-radius);
|
||||
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 {
|
||||
border: 0 var(--color-sidebar-border) solid;
|
||||
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;
|
||||
}
|
||||
|
||||
#sidebar section > div:first-child {
|
||||
margin-top: -1px;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
#search {
|
||||
|
|
@ -307,6 +341,10 @@ main:not([data-view^=route]) #origin-input,
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
main:not([data-view^=route]) #destination-input {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
main:not([data-view=location]) #location-buttons,
|
||||
main:not([data-view=route-search]) #route-search-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 {
|
||||
margin-bottom: 5px;
|
||||
color: var(--color-secondary);
|
||||
color: var(--color-foreground);
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -562,6 +600,11 @@ main.show-options #resultswrapper #route-options {
|
|||
|
||||
.location.focus {
|
||||
background-color: var(--color-tertiary);
|
||||
color: var(--color-focus);
|
||||
|
||||
.icon {
|
||||
color: var(--color-focus);
|
||||
}
|
||||
}
|
||||
|
||||
#autocomplete .location {
|
||||
|
|
@ -574,13 +617,14 @@ main.show-options #resultswrapper #route-options {
|
|||
|
||||
.location-label-text {
|
||||
line-height: 100%;
|
||||
border-radius: 2px;
|
||||
border-radius: var(--border-radius-small);
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
line-height: 100%;
|
||||
color: var(--color-overlay-text);
|
||||
background-color: var(--color-overlay-background);
|
||||
vertical-align: 12%;
|
||||
}
|
||||
|
|
@ -623,7 +667,7 @@ main.show-options #resultswrapper #route-options {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
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);
|
||||
transition: color 150ms;
|
||||
}
|
||||
|
|
@ -681,9 +725,9 @@ main[data-view^=route] button.random, .locationinput:not(.empty) button.random {
|
|||
|
||||
#route-dots {
|
||||
position: absolute;
|
||||
top: 53px;
|
||||
left: 25px;
|
||||
text-shadow: 2px 0 1px var(--color-route-dots-shadow), -2px 0 1px var(--color-route-dots-shadow);
|
||||
top: 43px;
|
||||
left: 15px;
|
||||
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;
|
||||
color: var(--color-route-dots);
|
||||
pointer-events: none;
|
||||
|
|
@ -734,7 +778,7 @@ main:not([data-view=route-result]) #route-dots {
|
|||
|
||||
.location-popup .leaflet-popup-content {
|
||||
font-size: 16px;
|
||||
color: var(--color-secondary);
|
||||
color: var(--color-foreground);
|
||||
overflow: hidden;
|
||||
line-height: 1.6;
|
||||
margin: 15px 10px 10px;
|
||||
|
|
@ -743,10 +787,51 @@ main:not([data-view=route-result]) #route-dots {
|
|||
|
||||
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
|
||||
background-color: var(--color-background);
|
||||
box-shadow: 1px 1px 3px var(--color-shadow);
|
||||
border-radius: 2px;
|
||||
box-shadow: var(--color-shadow) 0 0 var(--shadow-size);
|
||||
}
|
||||
|
||||
.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 {
|
||||
.leaflet-popup-content-wrapper {
|
||||
padding: 0;
|
||||
|
|
@ -891,8 +976,12 @@ main:not([data-view=route-result]) #route-summary {
|
|||
height: 37px;
|
||||
border-width: 0;
|
||||
font-size: 36px;
|
||||
color: var(--color-button);
|
||||
line-height: 1;
|
||||
color: var(--color-button);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-button-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
font-weight: bold;
|
||||
background-color: var(--color-control-active);
|
||||
color: var(--color-control-active);
|
||||
background-color: var(--color-control-background-active);
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
|
|
@ -950,14 +1040,14 @@ main:not([data-view=route-result]) #route-summary {
|
|||
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
background-color: var(--color-overlay-background);
|
||||
color: var(--color-secondary);
|
||||
color: var(--color-foreground);
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-secondary);
|
||||
color: var(--color-foreground);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -966,8 +1056,12 @@ main:not([data-view=route-result]) #route-summary {
|
|||
font-size: 20px;
|
||||
}
|
||||
|
||||
.leaflet-bar {
|
||||
box-shadow: 0 1px 5px var(--color-control-shadow);
|
||||
.leaflet-bar, .leaflet-control-key {
|
||||
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 {
|
||||
|
|
@ -976,9 +1070,13 @@ main:not([data-view=route-result]) #route-summary {
|
|||
border-bottom-color: var(--color-control-divider);
|
||||
}
|
||||
|
||||
.leaflet-bar a:first-child, .leaflet-bar a:last-child {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.leaflet-bar a:hover {
|
||||
background-color: var(--color-control-background-hover);
|
||||
color: var(--color-control);
|
||||
color: var(--color-control-hover);
|
||||
border-bottom-color: var(--color-control-divider);
|
||||
}
|
||||
|
||||
|
|
@ -986,12 +1084,12 @@ main:not([data-view=route-result]) #route-summary {
|
|||
color: var(--color-control);
|
||||
}
|
||||
|
||||
.leaflet-bar a.leaflet-disabled {
|
||||
.leaflet-bar a.leaflet-disabled, {
|
||||
color: var(--color-control-disabled);
|
||||
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);
|
||||
// TODO: is this even used?
|
||||
}
|
||||
|
|
@ -1086,8 +1184,9 @@ main:not([data-view=route-result]) #route-summary {
|
|||
}
|
||||
|
||||
#modal-content {
|
||||
box-shadow: 1px 1px 3px var(--color-shadow);
|
||||
border-radius: 2px;
|
||||
box-shadow: var(--color-shadow) 0 0 var(--shadow-size);
|
||||
border: 2px solid var(--color-modal-border);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--color-background);
|
||||
width: 380px;
|
||||
min-height: 150px;
|
||||
|
|
@ -1169,34 +1268,34 @@ ul.messages {
|
|||
|
||||
ul.messages li {
|
||||
padding: 1.0rem;
|
||||
border-radius: .4rem;
|
||||
border: 0.1rem solid #666666;
|
||||
background-color: #EEEEEE;
|
||||
border-radius: var(--border-radius);
|
||||
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 {
|
||||
color: #006688;
|
||||
border-color: #006688;
|
||||
background-color: #DDE4FF;
|
||||
--message-color-fg: #00dbff;
|
||||
}
|
||||
|
||||
ul.messages li.alert-success {
|
||||
color: #338800;
|
||||
border-color: #339900;
|
||||
background-color: #E4FFDD;
|
||||
--message-color-fg: #56ff27;
|
||||
}
|
||||
|
||||
ul.messages li.alert-warning {
|
||||
color: #CC6600;
|
||||
border-color: #FF9900;
|
||||
background-color: #FFFFDD;
|
||||
--message-color-fg: #ff8f3f;
|
||||
}
|
||||
|
||||
ul.messages li.alert-danger {
|
||||
color: #CC0000;
|
||||
border-color: #CC0000;
|
||||
background-color: #FFEEEE;
|
||||
--message-color-fg: #ff4677;
|
||||
}
|
||||
|
||||
.app-ads {
|
||||
|
|
@ -1212,8 +1311,8 @@ ul.messages li.alert-danger {
|
|||
|
||||
.app-ads div {
|
||||
background-color: var(--color-background);
|
||||
box-shadow: 1px 1px 3px var(--color-shadow);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 var(--shadow-size) var(--color-shadow);
|
||||
border-radius: var(--border-radius-small);
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
margin: 0 10px 25px;
|
||||
|
|
@ -1347,11 +1446,13 @@ main .narrow form button, main .narrow form .button {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
main form > p, #modal form > p {
|
||||
margin-bottom: 15px;
|
||||
main form, #modal form {
|
||||
> p {
|
||||
margin-bottom: 15px;
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.helptext {
|
||||
|
|
@ -1361,9 +1462,14 @@ main form > p, #modal form > p {
|
|||
color: var(--color-helptext);
|
||||
}
|
||||
|
||||
input[type=text], textarea {
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
height: 100px;
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
|
|
@ -1375,6 +1481,7 @@ main form > p, #modal form > p {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.user-permissions-form label {
|
||||
font-weight: 400;
|
||||
width: auto;
|
||||
|
|
@ -1562,9 +1669,6 @@ blink {
|
|||
}
|
||||
|
||||
.leaflet-control-key {
|
||||
background-color: white;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 1px 5px var(--color-control-shadow);
|
||||
background-clip: padding-box;
|
||||
|
||||
&.leaflet-control-key-expanded > .collapsed-toggle {
|
||||
|
|
@ -1576,6 +1680,7 @@ blink {
|
|||
height: 26px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
|
||||
&::before {
|
||||
font-family: 'Material Symbols Outlined';
|
||||
content: 'legend_toggle';
|
||||
|
|
@ -1587,24 +1692,32 @@ blink {
|
|||
> .pin-toggle {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
color: black;
|
||||
font-size: 1.5rem;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
color: var(--color-pin);
|
||||
font-size: 1.5rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
line-height: 2.2rem;
|
||||
box-shadow: inset 0 0 2px black;
|
||||
border-radius: 0.5rem;
|
||||
border-radius: var(--border-radius-leaflet-control);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: var(--color-pin-background);
|
||||
border: 1px solid var(--color-pin-border);
|
||||
box-shadow: inset 0 0 2px black;
|
||||
|
||||
|
||||
&.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 {
|
||||
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 {
|
||||
display: none;
|
||||
padding: 1rem;
|
||||
padding: 1rem 3rem 1rem 1rem;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 26px 1fr;
|
||||
grid-template-columns: 2rem 1fr;
|
||||
|
||||
> .key {
|
||||
display: grid;
|
||||
grid-column: span 2;
|
||||
grid-template-columns: subgrid;
|
||||
line-height: 2rem;
|
||||
|
||||
> .key-color {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--border-radius-small);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
box-shadow: var(--color-foreground) 0 0 var(var(--shadow-size) / 2), inset var(--color-foreground) 0 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -496,7 +496,7 @@ c3nav = {
|
|||
if (data.geometry && data.level) {
|
||||
L.geoJSON(data.geometry, {
|
||||
style: {
|
||||
color: 'var(--color-primary)',
|
||||
color: 'var(--color-map-overlay)',
|
||||
fillOpacity: 0.1,
|
||||
}
|
||||
}).addTo(c3nav._routeLayers[data.level]);
|
||||
|
|
@ -657,13 +657,14 @@ c3nav = {
|
|||
point = [destination[0] + Math.cos(angle) * offset, destination[1] + Math.sin(angle) * offset];
|
||||
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;
|
||||
var latlngs = L.GeoJSON.coordsToLatLngs(c3nav._smooth_line(coords)),
|
||||
routeLayer = c3nav._routeLayers[level];
|
||||
line = L.polyline(latlngs, {
|
||||
color: gray ? '#888888' : 'var(--color-primary)',
|
||||
dashArray: (gray || link_to_level) ? '7' : null,
|
||||
className: dots ? 'c3nav-route-dashes' : 'c3nav-route-line',
|
||||
color: dots ? 'var(--color-route-dashes)' : 'var(--color-map-overlay)',
|
||||
dashArray: (dots || link_to_level) ? '7' : null,
|
||||
interactive: false,
|
||||
smoothFactor: 0.5
|
||||
}).addTo(routeLayer);
|
||||
|
|
@ -1495,7 +1496,8 @@ c3nav = {
|
|||
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!
|
||||
}
|
||||
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-light').content = theme.theme_color_light;
|
||||
|
|
@ -1782,7 +1784,7 @@ c3nav = {
|
|||
if (data.geometry.type === "Point") return;
|
||||
L.geoJSON(data.geometry, {
|
||||
style: {
|
||||
color: 'var(--color-primary)',
|
||||
color: 'var(--color-map-overlay)',
|
||||
fillOpacity: 0.2,
|
||||
interactive: false,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
</style>
|
||||
{% 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" }}
|
||||
{{ active_theme_id|json_script:"c3nav-active-theme" }}
|
||||
{% compress css %}
|
||||
|
|
@ -41,6 +41,7 @@
|
|||
<link href="{% static 'material-symbols/material-symbols.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'site/css/c3nav.scss' %}" rel="stylesheet" type="text/x-scss">
|
||||
{% endcompress %}
|
||||
<style id="c3nav-theme-css-extra">{{ active_theme.css_extra | striptags | safe }}</style>
|
||||
{% block head %}
|
||||
{% endblock %}
|
||||
{% if header_logo and header_logo_mask_mode %}
|
||||
|
|
|
|||
|
|
@ -118,7 +118,6 @@
|
|||
</section>
|
||||
<section id="sidebar">
|
||||
<section id="search" class="loading">
|
||||
<div class="loader"></div>
|
||||
<div class="location locationinput empty" id="origin-input">
|
||||
<i class="icon material-symbols">place</i>
|
||||
<input type="text" autocomplete="off" spellcheck="false" placeholder="{% trans 'Search any location…' %}">
|
||||
|
|
@ -150,11 +149,11 @@
|
|||
</button>
|
||||
</div>
|
||||
<div id="route-summary">
|
||||
<div class="loader"></div>
|
||||
<i class="icon material-symbols">directions</i>
|
||||
<span></span>
|
||||
<small><em></em></small>
|
||||
<button class="button-clear options material-symbols">settings</button>
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
<div class="buttons" id="route-search-buttons">
|
||||
<button class="button-clear swap">
|
||||
|
|
@ -176,11 +175,11 @@
|
|||
{% trans 'Details' %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="loader"></div>
|
||||
</section>
|
||||
<div id="resultswrapper">
|
||||
<section id="autocomplete"></section>
|
||||
<section id="location-details" class="details">
|
||||
<div class="loader"></div>
|
||||
<div class="details-head">
|
||||
<button class="button close button-clear material-symbols float-right">close</button>
|
||||
<h2>{% trans 'Details' %}</h2>
|
||||
|
|
@ -196,6 +195,7 @@
|
|||
{% trans 'Open in Editor' %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="loader"></div>
|
||||
</section>
|
||||
<section id="route-details" class="details">
|
||||
<div class="details-head">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ from c3nav.mapdata.utils.cache.cache_decorator import mapdata_cache
|
|||
def css_vars_as_str(vars):
|
||||
css_str = ''
|
||||
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
|
||||
|
||||
|
||||
|
|
@ -44,14 +45,14 @@ def make_themes(theme_models):
|
|||
from django.utils.translation import gettext_lazy as _
|
||||
|
||||
themes = {}
|
||||
base_css_vars = settings.BASE_THEME['css'].copy()
|
||||
base_css_vars = settings.BASE_THEME['css_vars'].copy()
|
||||
modify_vars(base_css_vars)
|
||||
primary_color = base_css_vars['primary']
|
||||
if settings.BASE_THEME['randomize_primary_color']:
|
||||
del base_css_vars['primary']
|
||||
base_theme_vars_str = css_vars_as_str(base_css_vars)
|
||||
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'],
|
||||
'randomize_primary_color': settings.BASE_THEME['randomize_primary_color'],
|
||||
'primary_color': primary_color,
|
||||
|
|
@ -66,14 +67,15 @@ def make_themes(theme_models):
|
|||
for theme in theme_models:
|
||||
css_vars = theme.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:
|
||||
del css_vars['primary']
|
||||
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] = {
|
||||
'name': theme.title,
|
||||
'css': css_code,
|
||||
'css_vars': css_code,
|
||||
'css_extra': theme.extra_css,
|
||||
'funky': theme.funky,
|
||||
'theme_color_dark': 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:
|
||||
default_theme = {
|
||||
'css_code': css_code,
|
||||
'css_vars': css_code,
|
||||
'css_extra': theme.extra_css,
|
||||
'theme_color': css_vars['header-background'],
|
||||
'randomize_primary_color': theme.randomize_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:
|
||||
name = _('Automatic')
|
||||
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']
|
||||
else:
|
||||
name = _('Default')
|
||||
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']
|
||||
|
||||
themes[0] = {
|
||||
'name': name,
|
||||
'css': css_code,
|
||||
'css_vars': css_code,
|
||||
'css_extra': '',
|
||||
'funky': False,
|
||||
'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'],
|
||||
|
|
@ -135,7 +139,7 @@ def random_color():
|
|||
|
||||
def get_random_primary_color(request):
|
||||
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':
|
||||
return random_color()
|
||||
elif settings.PRIMARY_COLOR_RANDOMISATION['mode'] == 'session':
|
||||
|
|
|
|||
|
|
@ -7,10 +7,8 @@ button,
|
|||
input[type='button'],
|
||||
input[type='reset'],
|
||||
input[type='submit']
|
||||
background-color: var(--color-primary)
|
||||
border: .1rem solid var(--color-primary)
|
||||
border: .1rem solid
|
||||
border-radius: .4rem
|
||||
color: var(--color-initial)
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
font-size: 1.1rem
|
||||
|
|
@ -26,50 +24,10 @@ input[type='submit']
|
|||
|
||||
&:focus,
|
||||
&:hover
|
||||
background-color: var(--color-secondary)
|
||||
border-color: var(--color-secondary)
|
||||
color: var(--color-initial)
|
||||
outline: 0
|
||||
|
||||
&[disabled]
|
||||
cursor: default
|
||||
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)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue