Use transition duration CSS variables in vue

src/components/project.vue

@@ -68,7 +68,10 @@ export default {
 			lightbox: null,
 			hikes: {
 				colors: {},
-				width: null
+				width: null,
+				transitions: {
+					lineWidthTransition: {duration:null}
+				}
 			},
 			popup: {content: null, element: null},
 			overview: {id: 0, codename:'overview', name: this.lang.get('project.overview')},
@@ -128,6 +131,7 @@ export default {
 				'hitchhiking': this.getStyleProperty('--track-hitchhiking')
 			};
 			this.hikes.width = parseFloat(this.getStyleProperty('--track-width'));
+			this.hikes.transitions.lineWidthTransition.duration = parseFloat(this.getStyleProperty('--trans-quick'));
 
 			//Reset values
 			this.track = null;
@@ -164,10 +168,10 @@ export default {
 			if(!this.lightbox) {
 				this.lightbox = new Lightbox({
 					alwaysShowNavOnTouchDevices: true,
-					fadeDuration: 300,
-					imageFadeDuration: 400,
+					fadeDuration: parseFloat(this.getStyleProperty('--trans-quick')),
+					imageFadeDuration: parseFloat(this.getStyleProperty('--trans-quick')),
 					positionFromTop: 0,
-					resizeDuration: 400,
+					resizeDuration: parseFloat(this.getStyleProperty('--trans-slow')),
 					hasVideo: true,
 					onMediaChange: async (oMedia) => {
 						this.hash.items = [this.project.codename, 'media', oMedia.id];
@@ -409,7 +413,7 @@ export default {
 			this.openPopup({
 				lnglat: [oMarker.longitude, oMarker.latitude],
 				options: oMarker,
-				offset: [0, -1 * this.markerHeight]
+				offset: [0, -1 * this.markerHeight * (this.isMobile?this.getStyleProperty('--zoom-scale'):1)]
 			});
 		},
 		openTrackPopup(oEvent) {