Remove hard-coded colors in vue

This commit is contained in:
2026-05-13 13:23:10 +02:00
parent 17fe2330c6
commit c3835f45c5
4 changed files with 26 additions and 10 deletions

View File

@@ -41,7 +41,7 @@ export default {
map: null, map: null,
lightbox: null, lightbox: null,
hikes: { hikes: {
colors:{'main':'#00ff78', 'off-track':'#0000ff', 'hitchhiking':'#FF7814'}, colors: {},
width: 4 width: 4
}, },
popup: {content: null, element: null} popup: {content: null, element: null}
@@ -117,6 +117,11 @@ export default {
this.posts = []; this.posts = [];
//this.baseMap = null; //this.baseMap = null;
this.baseMaps = {}; this.baseMaps = {};
this.hikes.colors = {
'main': this.getStyleProperty('--track-main'),
'off-track': this.getStyleProperty('--track-off-track'),
'hitchhiking': this.getStyleProperty('--track-hitchhiking')
};
}, },
initLightbox() { initLightbox() {
if(!this.lightbox) { if(!this.lightbox) {
@@ -185,8 +190,8 @@ export default {
version: 8, version: 8,
projection: {type: 'globe'}, projection: {type: 'globe'},
sky: { sky: {
'sky-color': '#000000', 'sky-color': this.getStyleProperty('--space'),
'horizon-color': '#ffffff', 'horizon-color': this.getStyleProperty('--horizon'),
'sky-horizon-blend': 0.35, 'sky-horizon-blend': 0.35,
'atmosphere-blend': 0.8 'atmosphere-blend': 0.8
}, },
@@ -500,6 +505,9 @@ export default {
if(iDuration > 0) this.map.easeTo({padding: asPadding, duration: iDuration}); if(iDuration > 0) this.map.easeTo({padding: asPadding, duration: iDuration});
else this.map.jumpTo({padding: asPadding}); else this.map.jumpTo({padding: asPadding});
}, },
getStyleProperty(sProperty) {
return getComputedStyle(this.$el).getPropertyValue(sProperty).trim();
},
isMarkerVisible(oLngLat){ isMarkerVisible(oLngLat){
return !!this.map && this.map.getBounds().contains(oLngLat); return !!this.map && this.map.getBounds().contains(oLngLat);
}, },

View File

@@ -41,7 +41,9 @@ $title: $default;
$subtitle: #999; $subtitle: #999;
$download-hover: #0078A8; $download-hover: #0078A8;
//Legend colors //Map colors
$space: #000000;
$horizon: #FFFFFF;
$legend: $default; $legend: $default;
$main-track: $message-flashy; $main-track: $message-flashy;
$off-track: #0000ff; $off-track: #0000ff;

View File

@@ -205,7 +205,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
} }
#background { #background {
background: color.$loader-bg; background: color.$space;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;

View File

@@ -6,10 +6,16 @@
@use '@styles/page.project.feed' as feed; @use '@styles/page.project.feed' as feed;
@use '@styles/page.project.settings' as settings; @use '@styles/page.project.settings' as settings;
#projects { #projects {
overflow: hidden; --space: #{color.$space};
position: absolute; --horizon: #{color.$horizon};
top: 0; --track-main: #{color.$main-track};
--track-off-track: #{color.$off-track};
--track-hitchhiking: #{color.$hitchhiking};
overflow: hidden;
position: absolute;
top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -77,4 +83,4 @@
} }
} }
} }
} }