From 52316d9abbabf50e435cf328e8b1f71c6a56c25f Mon Sep 17 00:00:00 2001
From: Franzz <francois@lutran.fr>
Date: Mon, 13 Apr 2026 23:02:35 +0200
Subject: [PATCH] Fix color dependencies

---
 src/components/project.vue             |  2 +-
 src/styles/_color.scss                 | 58 ++++++++++++++++++++------
 src/styles/_common.scss                | 16 +++----
 src/styles/_fa.scss                    | 33 +++------------
 src/styles/_lightbox.scss              | 11 ++---
 src/styles/_page.admin.scss            | 12 +++---
 src/styles/_page.project.feed.scss     | 28 +++++++++----
 src/styles/_page.project.map.scss      | 11 ++---
 src/styles/_page.project.panel.scss    | 30 ++++++-------
 src/styles/_page.project.scss          |  4 +-
 src/styles/_page.project.settings.scss | 18 ++++----
 src/styles/_page.upload.scss           |  8 ++--
 12 files changed, 132 insertions(+), 99 deletions(-)

diff --git a/src/components/project.vue b/src/components/project.vue
index 6a7a2fc..b283041 100644
--- a/src/components/project.vue
+++ b/src/components/project.vue
@@ -111,7 +111,7 @@ export default {
 
 				//Check for project change
 				if(asNewHash.items[0] != asOldHash.items[0]) {
-					console.log('Project change: '+(asOldHash.items[0])+' ->', asNewHash.items[0]);
+					this.$parent.hash.items = [asNewHash.items[0]];
 					this.init();
 				}
 			},
diff --git a/src/styles/_color.scss b/src/styles/_color.scss
index e9a5eb9..6915f2e 100644
--- a/src/styles/_color.scss
+++ b/src/styles/_color.scss
@@ -1,19 +1,53 @@
 @use "sass:color";
 
+//Default colors
+$default: hsl(0, 0%, 27%);
+$default-hover: color.adjust($default, $lightness: -10%, $space: hsl);
+$default-disabled: color.adjust($default, $lightness: 50%, $space: hsl);
+$default-bg: color.adjust($default, $lightness: 60%, $space: hsl);
+$default-bg-light: color.adjust($default, $lightness: 65%, $space: hsl);
+$default-bg-trans: color.adjust($default, $lightness: 70%, $alpha: -0.2, $space: hsl);
+$default-bg-trans-disabled: color.adjust($default, $lightness: 70%, $alpha: -0.5, $space: hsl);
+$default-inv: $default-bg;
+$default-inv-bg: $default;
+
 //Feed colors
-$post-input-bg: 		#ffffff;
-$post: 					#333;
-$post-hover: 			color.adjust($post, $lightness: -10%, $space: hsl);
-$post-bg: 				rgba(255, 255, 255, .8);
-$message:				#326526;
-$message-hover:			color.adjust($message, $lightness: -10%, $space: hsl);
-$message-bg: 			#6DFF58;
-$media:					#333;
-$media-bg:				rgba(255, 255, 255, .8);
+$post-input-bg: 	#ffffff;
+$post: 				$default;
+$post-hover: 		$default-hover;
+$post-bg: 			$default-bg;
+
+$message:			hsl(109, 45%, 27%);
+$message-hover:		color.adjust($message, $lightness: -10%, $space: hsl);
+$message-bg:		color.adjust($message, $lightness: 60%, $space: hsl);
+
+$media:				hsl(214, 45%, 27%);
+$media-hover:		color.adjust($media, $lightness: -10%, $space: hsl);
+$media-bg:			color.adjust($media, $lightness: 60%, $space: hsl);
+$media-bg-light:	color.adjust($media, $lightness: 60%, $alpha: -0.4, $space: hsl);
+
+//Over image colors
+$over-img: 			#ffffff;
+$over-img-bg:		color.adjust($default, $lightness: 70%, $alpha: -0.5, $space: hsl);
+$over-img-shadow:	rgba(0, 0, 0, 0.5);
 
 //Settings colors
-$title: $post;
-$subtitle: #999;
+$title: 			$default;
+$subtitle: 			#999;
+$download-hover:	#0078A8;
 
 //Legend colors
-$legend: $post;
\ No newline at end of file
+$legend:			$default;
+
+//Tracks
+$track-start:		$message;
+$track-end:			#FF7814;
+
+//Loader
+$loader: 			$default-bg;
+$loader-bg:			$default;
+
+//Feedback
+$error:				#ff0000;
+$warning:			#ffa500;
+$success:			#008000;
\ No newline at end of file
diff --git a/src/styles/_common.scss b/src/styles/_common.scss
index 9e188bd..5fe4c7b 100644
--- a/src/styles/_common.scss
+++ b/src/styles/_common.scss
@@ -1,3 +1,5 @@
+@use "color";
+
 /* Animations */
 
 @-webkit-keyframes fadeIn {
@@ -102,12 +104,12 @@ a.button {
 button, a.button {
 	@extend .clickable;
 	font-weight: bold;
-	color: #000;
-	background: #eee;
+	color: color.$default;
+	background: color.$default-bg;
 
 	&:hover {
-		color: #eee;
-		background: #000;
+		color: color.$default-inv;
+		background: color.$default-inv-bg;
 	}
 }
 
@@ -129,13 +131,13 @@ h1 {
 	p {
 		margin: 0 0 1em 0;
 		&.error {
-			color: red;
+			color: color.$error;
 		}
 		&.warning {
-			color: orange;
+			color: color.$warning;
 		}
 		&.success {
-			color: green;
+			color: color.$success;
 		}
 	}
 }
diff --git a/src/styles/_fa.scss b/src/styles/_fa.scss
index 62fb95e..4452242 100644
--- a/src/styles/_fa.scss
+++ b/src/styles/_fa.scss
@@ -1,9 +1,9 @@
 
 
 
-@use 'fa/solid' with (
-  $fa-css-prefix: fa,
-  $fa-font-path: "fonts"
+@use 'fa/solid' with (
+  $fa-css-prefix: fa,
+  $fa-font-path: "fonts"
 );
 @use 'fa/mixins';
 @use 'fa/core';
@@ -14,9 +14,9 @@
 @use 'fa/animated';
 @use 'fa/rotated-flipped';
 @use 'fa/stacked';
-@use "fa/functions";
-@use "fa/variables";
-
+@use "fa/functions";
+@use "fa/variables";
+
 
 .fa {
 	&.push {
@@ -27,27 +27,6 @@
 	}
 }
 
-.control-icon {
-	@extend .fa;
-	font-size: 28px;
-	text-align: center;
-	line-height: 44px;
-	text-decoration: none;
-	color: #CCC;
-	background: none;
-	text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
-
-	&:hover {
-		color: white;
-	}
-
-	&:before {
-		display: block;
-		width: 44px;
-		height: 44px;
-	}
-}
-
 /* Navigation */
 .#{variables.$fa-css-prefix}-menu:before { content: functions.fa-content(variables.$fa-var-bars); }
 .#{variables.$fa-css-prefix}-error:before { content: functions.fa-content(variables.$fa-var-square-exclamation); }
diff --git a/src/styles/_lightbox.scss b/src/styles/_lightbox.scss
index 46c6caf..5ed6b0d 100644
--- a/src/styles/_lightbox.scss
+++ b/src/styles/_lightbox.scss
@@ -1,6 +1,7 @@
 @use "common";
 @use "fa/variables";
 @use "fa";
+@use "color";
 
 @use "lightbox/lightbox";
 
@@ -97,7 +98,7 @@
 	.lb-outerContainer {
 		margin: 0;
 		border-radius:0;
-		background-color: rgba(255, 255, 255, 0.5);
+		background-color: color.$default-bg-trans;
 		
 		.lb-container {
 			overflow: hidden;
@@ -151,9 +152,9 @@
 				}
 
 				a.lb-prev, a.lb-next {
-					color: white;
+					color: color.$over-img;
 					text-decoration: none;
-					text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
+					text-shadow: 0px 1px 1px color.$over-img-shadow;
 					width: 150px;
 					height: 150px;
 					position: absolute;
@@ -212,7 +213,7 @@
 				height: auto;
 				font-size: 1.3333333333em;
 				line-height: 1em;
-				color: white;
+				color: color.$over-img;
 			}
 		}
 	}
@@ -220,7 +221,7 @@
 	.lb-cancel {
 		@include lightbox-icon(cancel);
 		@extend .flicker;
-		color: #CCC;
+		color: color.$default-inv;
 		text-decoration: none;
 	}
 }
\ No newline at end of file
diff --git a/src/styles/_page.admin.scss b/src/styles/_page.admin.scss
index 624f179..5d5bbe4 100644
--- a/src/styles/_page.admin.scss
+++ b/src/styles/_page.admin.scss
@@ -1,3 +1,5 @@
+@use "color";
+
 #admin {
 	margin: 1em;
 	
@@ -6,12 +8,12 @@
 		border-collapse: collapse;
 		tr {
 			th {
-				background: #AAA;
-				color: white;
+				background: color.$default-inv-bg;
+				color: color.$default-inv;
 				padding: 0.2rem 0.5rem;
 			}
 			td {
-				background: #EEE;
+				background: color.$default-bg-light;
 				text-align: center;
 				padding: 0.2rem 0.5rem;
 				
@@ -25,10 +27,10 @@
 				}
 			
 				button {
-					color: #AAA;
+					color: color.$default;
 					background: none;
 					&:hover {
-						color: #666;
+						color: color.$default-hover;
 					}
 				}
 			}
diff --git a/src/styles/_page.project.feed.scss b/src/styles/_page.project.feed.scss
index ee341ac..96488b2 100644
--- a/src/styles/_page.project.feed.scss
+++ b/src/styles/_page.project.feed.scss
@@ -23,7 +23,7 @@
 			}
 
 			.archived {
-				background: #EEE;
+				background: color.$default-bg-light;
 			}
 		}
 
@@ -43,7 +43,7 @@
 			color: color.$post;
 			border-radius: var.$block-radius;
 			width: calc(100% - var.$block-spacing);
-			box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
+			box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow;
 
 			a {
 				color: color.$post;
@@ -197,22 +197,35 @@
 
 			&.media {
 				background: color.$media-bg;
-				color: color.$message-hover;
+				color: color.$media;
+
+				a {
+					color: color.$media;
+					&:hover {
+						color: color.$media-hover;
+					}
+				}
 
 				.body {
 					a {
 						display: inline-block;
 						width: 100%;
 						margin: 0;
-						color: color.$message-hover;
 						position: relative;
 						line-height: 0;
 
 						&.drill {
+							.comment {
+								background: color.$media-bg-light;
+							}
+
 							&:hover {
-								.drill-icon .fa-drill-image, .drill-icon .fa-drill-video {
-									color: rgba(color.$media-bg, 0.75);
+								.drill-icon {
+									.fa-drill-image, .fa-drill-video {
+										color: color.$media-bg;
+									}
 								}
+
 								.comment {
 									opacity: 0;
 								}
@@ -225,7 +238,7 @@
 									color: transparent;
 								}
 								.fa-drill-video {
-									color: rgba(255, 255, 255, 0.5);
+									color: color.$over-img-bg;
 								}
 							}
 						}
@@ -248,7 +261,6 @@
 							margin: 0;
 							padding: 0.5em;
 							text-align: justify;
-							background: rgba(255, 255, 255, 0.6);
 							border-radius: 0 0 var.$block-radius var.$block-radius;
 							transition: opacity 0.3s;
 							opacity: 1;
diff --git a/src/styles/_page.project.map.scss b/src/styles/_page.project.map.scss
index d8c3821..b084cc1 100644
--- a/src/styles/_page.project.map.scss
+++ b/src/styles/_page.project.map.scss
@@ -18,6 +18,7 @@ $thumbnail-max-size: 60px;
 
 	.maplibregl-popup-content {
 		padding: var.$block-spacing;
+		background-color: color.$default-bg-light;
 
 		h1 {
 			font-size: 1.4em;
@@ -26,14 +27,14 @@ $thumbnail-max-size: 60px;
 		}
 
 		.separator {
-			border-top: 1px solid #CCC;
+			border-top: 1px solid color.$default-bg;
 			margin: var.$elem-spacing 0;
 		}
 
 		/* Marker Popup */
 		.info-window {
 			h1 .message-type {
-				color: #CCC;
+				color: color.$default;
 				font-weight: normal;
 				font-size: calc(1em / 1.4);
 				margin-left: 0.5em;
@@ -45,7 +46,7 @@ $thumbnail-max-size: 60px;
 				margin: var.$elem-spacing 0 0 0;
 
 				a {
-					color: color.$post;
+					color: color.$default;
 				}
 			}
 
@@ -68,12 +69,12 @@ $thumbnail-max-size: 60px;
 							color: transparent;
 						}
 						.fa-drill-video {
-							color: rgba(255, 255, 255, 0.5);
+							color: color.$over-img-bg;
 						}
 
 						&:hover {
 							.fa-drill-video, .fa-drill-image {
-								color: rgba(255, 255, 255, 0.75);
+								color: color.$default-bg;
 							}
 						}
 					}
diff --git a/src/styles/_page.project.panel.scss b/src/styles/_page.project.panel.scss
index 7dd0593..5fb4549 100644
--- a/src/styles/_page.project.panel.scss
+++ b/src/styles/_page.project.panel.scss
@@ -33,7 +33,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 			transform: translateX(0);
 
 			.map-panel {
-				box-shadow: 2px 2px var.$block-shadow 0px rgba(0, 0, 0, .5);
+				box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow;
 			}
 		}
 	}
@@ -77,17 +77,17 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 		}
 	
 		button, a.button {
-			background-color: color.$post;
-			color: color.$post-bg;
+			background-color: color.$default-inv-bg;
+			color: color.$default-inv;
 	
 			&:hover, &:hover a, &:hover a:visited {
-				background-color: color.$post-input-bg;
-				color: color.$post;
+				background-color: color.$default-bg-light;
+				color: color.$default;
 			}
 	
 			a, a:visited {
-				background-color: color.$post;
-				color: color.$post-bg;
+				background-color: color.$default;
+				color: color.$default-bg;
 				text-decoration: none;
 			}
 	
@@ -104,8 +104,8 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 			width: calc(100% - var.$block-spacing);
 			margin: var.$block-spacing;
 			border-radius: var.$block-radius;
-			color: color.$post;
-			background: rgba(255, 255, 255, 0.8);
+			color: color.$default;
+			background: color.$default-bg-trans;
 			display: flex;
 			flex-direction: column;
 			flex-wrap: nowrap;
@@ -123,10 +123,10 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 
 	.map-control {
 		position: absolute;
-		background-color: color.$post-bg;
+		background-color: color.$default-bg;
 		padding: var.$elem-spacing;
 		border-radius: 3px;
-		box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
+		box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow;
 		font-size: 12px;
 		line-height: 1.5;
 		
@@ -143,11 +143,11 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 
 			.fa {
 				@extend .fa-fw;
-				color: color.$post;
+				color: color.$default;
 			}
 
 			&:hover .fa {
-				color: #000000;
+				color: color.$default-hover;
 			}
 		}
 	}
@@ -191,7 +191,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 	}
 
 	#background {
-		background: #666;
+		background: color.$loader-bg;
 		position: absolute;
 		left: 0;
 		top: 0;
@@ -212,7 +212,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 			font-size: 3em;
 			top: calc(50% - 0.5em);
 			left: calc(50% - 1.25em/2);
-			color: #CCC;
+			color: color.$loader;
 		}
 	}
 }
\ No newline at end of file
diff --git a/src/styles/_page.project.scss b/src/styles/_page.project.scss
index 553bd80..9b95def 100644
--- a/src/styles/_page.project.scss
+++ b/src/styles/_page.project.scss
@@ -47,12 +47,12 @@
 		    top: 1px;
 		}
 		.fa-track-start, .fa-track-end {
-			color: color.$message;
+			color: color.$track-start;
 			font-size: 14px;
 			top: 1px;
 		}
 		.fa-track-end {
-			color: #FF7814;
+			color: color.$track-end;
 		}
 	}
 }
\ No newline at end of file
diff --git a/src/styles/_page.project.settings.scss b/src/styles/_page.project.settings.scss
index 5d02cec..968d3d8 100644
--- a/src/styles/_page.project.settings.scss
+++ b/src/styles/_page.project.settings.scss
@@ -10,7 +10,7 @@
 			flex: 0 1 auto;
 
 			.logo {
-				background: rgba(255, 255, 255, .4);
+				background: color.$default-bg;
 				padding: 2rem 1rem;
 				border-radius: var.$block-radius var.$block-radius 0 0;
 
@@ -54,15 +54,15 @@
 
 		.settings-footer {
 			flex: 0 1 auto;
-			background: rgba(255, 255, 255, .4);
+			background: color.$default-bg;
 			border-radius: 0 0 3px 3px;
 			font-size: 0.7em;
 			padding: 0.3rem;
 			text-align: center;
-			color: #888;
+			color: color.$default;
 
 			a {
-				color: #777;
+				color: color.$default;
 				text-decoration: none;
 			}
 		}
@@ -104,10 +104,10 @@
 						}
 
 						.download {
-							color: color.$legend;
+							color: color.$default;
 	
 							&:hover {
-								color: #0078A8;
+								color: color.$download-hover;
 							}
 						}
 					}
@@ -118,8 +118,8 @@
 						width: calc(100% - 6em);
 
 						&:disabled {
-							color: #999;
-							background: rgba(255,255,255,0.2);
+							color: color.$default-disabled;
+							background: color.$default-bg-trans-disabled;
 						}
 					}
 					button#nl_btn {
@@ -134,7 +134,7 @@
 						}
 						&.loading {
 							background-color: color.$message;
-							color: white;
+							color: color.$post-input-bg;
 							span {
 								@extend .flicker;
 							}
diff --git a/src/styles/_page.upload.scss b/src/styles/_page.upload.scss
index bf381d1..d964e12 100644
--- a/src/styles/_page.upload.scss
+++ b/src/styles/_page.upload.scss
@@ -1,3 +1,5 @@
+@use "color";
+
 #upload {
 	padding: 1em;
 
@@ -5,13 +7,13 @@
 		border-radius: 3px;
 		margin-top: 1rem;
 		padding: 0 1rem 1rem 1rem;
-		border-bottom: 1px solid #EEE;
+		border-bottom: 1px solid color.$default-bg;
 }
 
 	.progress {
 		.bar {
 			height: 18px;
-			background: green;
+			background: color.$success;
 		}
 	}
 
@@ -33,7 +35,7 @@
 				width: calc(100% - 2rem);
 				box-sizing: border-box;
 				padding: 0.5em;
-				background: #EEE;
+				background: color.$default-bg;
 			}
 			
 			.save {