From 86082c513e091103ebb8cb814a3e8bab5711e444 Mon Sep 17 00:00:00 2001
From: Franzz <francois@lutran.fr>
Date: Sun, 3 May 2026 16:45:21 +0200
Subject: [PATCH] Harmonize CSS

---
 src/components/project.vue             | 10 +++++-----
 src/components/projectMediaLink.vue    |  2 +-
 src/components/projectRelTime.vue      |  2 +-
 src/scripts/lightbox.js                |  2 +-
 src/styles/_lightbox.scss              | 13 ++++++-------
 src/styles/_page.admin.scss            |  8 ++++++--
 src/styles/_page.project.feed.scss     |  4 ++--
 src/styles/_page.project.map.scss      |  2 +-
 src/styles/_page.project.settings.scss |  8 ++++----
 src/styles/_page.upload.scss           | 11 ++++++-----
 10 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/components/project.vue b/src/components/project.vue
index 8cd3dbb..310a43d 100644
--- a/src/components/project.vue
+++ b/src/components/project.vue
@@ -588,7 +588,7 @@ export default {
 		<div id="background"></div>
 		<div id="submap">
 			<div class="loader">
-				<SpotIcon :icon="'map'" :classes="'flicker'" fixed-width />
+				<SpotIcon :icon="'map'" :classes="'flicker'" width="fixed" />
 			</div>
 		</div>
 		<div id="map"></div>
@@ -603,7 +603,7 @@ export default {
 				<div class="settings-sections">
 					<Simplebar id="settings-sections-scrollbox">
 						<div class="settings-section">
-							<h1><SpotIcon :icon="'project'" fixed-width :text="lang.get('project.hikes')" /></h1>
+							<h1><SpotIcon :icon="'project'" width="fixed" :text="lang.get('project.hikes')" /></h1>
 							<div class="settings-section-body">
 								<div class="radio" v-for="project in projects" :key="'project-'+project.id">
 									<input type="radio" :id="'project-'+project.id" :value="project.codename" v-model="$parent.hash.items[0]" />
@@ -617,7 +617,7 @@ export default {
 							</div>
 						</div>
 						<div class="settings-section">
-							<h1><SpotIcon :icon="'map'" fixed-width :text="lang.get('map.title')" /></h1>
+							<h1><SpotIcon :icon="'map'" width="fixed" :text="lang.get('map.title')" /></h1>
 							<div class="settings-section-body">
 								<div class="radio" v-for="bm in baseMaps" :key="'map-'+bm.id_map">
 									<input type="radio" :id="'map-'+bm.id_map" :value="bm.codename" v-model="baseMap" />
@@ -626,7 +626,7 @@ export default {
 							</div>
 						</div>
 						<div class="settings-section newsletter">
-							<h1><SpotIcon :icon="'newsletter'" fixed-width :text="lang.get('newsletter.title')" /></h1>
+							<h1><SpotIcon :icon="'newsletter'" width="fixed" :text="lang.get('newsletter.title')" /></h1>
 							<div class="newsletter-form">
 								<input type="email" name="email" id="email" :placeholder="lang.get('newsletter.email_placeholder')" v-model="user.email" :disabled="nlLoading || subscribed" />
 								<SpotButton id="nl_btn" :classes="nlClasses" :title="lang.get('newsletter.'+nlAction)" :icon="nlAction" @click="manageSubs" />
@@ -639,7 +639,7 @@ export default {
 							{{ lang.get('newsletter.'+(subscribed?'subscribed':'unsubscribed')+'_desc') }}
 						</div>
 						<div class="settings-section admin" v-if="user.hasClearance(consts.clearances.admin)">
-							<h1><SpotIcon :icon="'admin'" fixed-width :text="lang.get('admin.title')" /></h1>
+							<h1><SpotIcon :icon="'admin'" width="fixed" :text="lang.get('admin.title')" /></h1>
 							<div class="admin-actions">
 								<a class="button" href="#admin"><SpotIcon :icon="'config'" :text="lang.get('admin.config')" /></a>
 								<a class="button" href="#upload"><SpotIcon :icon="'upload'" :text="lang.get('admin.upload')" /></a>
diff --git a/src/components/projectMediaLink.vue b/src/components/projectMediaLink.vue
index 7115f62..04dee25 100644
--- a/src/components/projectMediaLink.vue
+++ b/src/components/projectMediaLink.vue
@@ -57,7 +57,7 @@ export default {
 	</a>
 	<div style="display:none">
 		<span v-if="options.comment" ref="comment" class="lb-caption-line comment desktop">
-			<spotIcon :icon="'post'" fixed-width size="lg" :text-classes="'comment-text'" :text="options.comment" />
+			<spotIcon :icon="'post'" width="fixed" size="lg" :text-classes="'comment-text'" :text="options.comment" />
 		</span>
 		<span ref="postedon" class="lb-caption-line">
 			<projectRelTime :icon="'upload'" :localTime="options.posted_on_formatted_time_local" :siteTime="options.posted_on_formatted_time" :offset="options.posted_on_day_offset" />
diff --git a/src/components/projectRelTime.vue b/src/components/projectRelTime.vue
index e4a300a..d209a07 100644
--- a/src/components/projectRelTime.vue
+++ b/src/components/projectRelTime.vue
@@ -23,6 +23,6 @@ export default {
 </script>
 
 <template>
-	<spotIcon v-if="icon" :icon="icon" :margin="margin" :title="title" :text="localTime" fixed-width size="lg" />
+	<spotIcon v-if="icon" :icon="icon" :margin="margin" :title="title" :text="localTime" width="fixed" size="lg" />
 	<span v-else :class="classes" :title="title">{{ localTime }}</span>
 </template>
diff --git a/src/scripts/lightbox.js b/src/scripts/lightbox.js
index 40bc022..1d8ae47 100644
--- a/src/scripts/lightbox.js
+++ b/src/scripts/lightbox.js
@@ -299,7 +299,7 @@ class Lightbox {
 		this.hideElements([this.image, this.video, this.nav, this.prev, this.next, this.caption, this.closeButton]);
 		this.resetImageTransform();
 		this.dataContainer.style.width = '200px';
-		this.dataContainer.style.height = '30px';
+		this.dataContainer.style.height = '35px';
 		this.outerContainer.classList.add('animating');
 		this.container.classList.remove('moveable', 'moving', 'lb-video-nav');
 
diff --git a/src/styles/_lightbox.scss b/src/styles/_lightbox.scss
index 783f139..c2b4a42 100644
--- a/src/styles/_lightbox.scss
+++ b/src/styles/_lightbox.scss
@@ -1,4 +1,5 @@
 @use "common";
+@use "var";
 @use "color";
 
 body.lb-disable-scrolling {
@@ -34,17 +35,16 @@ body.lb-disable-scrolling {
 		
 		.lb-dataContainer {
 			width: 100%;
-			height: 30px;
 			
 			.lb-data {
 				flex-direction: row;
 
 				.lb-details {
-					width: calc(100% - 1.25rem);
+					flex: 1 1 auto;
 					
 					.lb-caption {
 						.lb-caption-line {
-							padding-right: 1em;
+							padding-right: var.$block-spacing;
 							line-height: 1.33333333333em; //icon height
 							overflow: hidden;
 
@@ -68,7 +68,6 @@ body.lb-disable-scrolling {
 		flex-direction: row;
 		
 		.lb-dataContainer {
-			width: 200px;
 			height: 100%;
 			
 			.lb-data {
@@ -76,7 +75,7 @@ body.lb-disable-scrolling {
 				
 				.lb-caption-line {
 					display: block;
-					margin-top: 1em;
+					margin-top: var.$block-spacing;
 					line-height: 1.33333333em;
 
 					&.comment {
@@ -85,7 +84,7 @@ body.lb-disable-scrolling {
 						}
 						.comment-text {
 							display: inline-block;
-							width: calc(100% - 1.25em*1.33333333333 - 0.5rem);
+							width: calc(100% - 1.25em*1.33333333333 - var.$elem-spacing);
 							vertical-align: top;
 						}
 					}
@@ -240,7 +239,7 @@ body.lb-disable-scrolling {
 		
 		.lb-data {
 			text-align: left;
-			padding: 0.5rem 0.5rem 0 0.5rem;
+			padding: var.$elem-spacing;
 			display: flex;
 			color: color.$default-inv;
 			
diff --git a/src/styles/_page.admin.scss b/src/styles/_page.admin.scss
index 5d5bbe4..ccaf568 100644
--- a/src/styles/_page.admin.scss
+++ b/src/styles/_page.admin.scss
@@ -1,3 +1,4 @@
+@use "var";
 @use "color";
 
 #admin {
@@ -6,16 +7,19 @@
 	table {
 		margin-bottom: 1em;
 		border-collapse: collapse;
+		border-radius: var.$block-radius;
+		overflow: hidden;
+
 		tr {
 			th {
 				background: color.$default-inv-bg;
 				color: color.$default-inv;
-				padding: 0.2rem 0.5rem;
+				padding: var.$text-spacing var.$elem-spacing;
 			}
 			td {
 				background: color.$default-bg-light;
 				text-align: center;
-				padding: 0.2rem 0.5rem;
+				padding: var.$text-spacing var.$elem-spacing;
 				
 				input {
 					&[type="number"] {
diff --git a/src/styles/_page.project.feed.scss b/src/styles/_page.project.feed.scss
index 5648291..21f6593 100644
--- a/src/styles/_page.project.feed.scss
+++ b/src/styles/_page.project.feed.scss
@@ -178,7 +178,7 @@
 					.spot-icon {
 						font-size: 1.3em;
 						vertical-align: middle;
-						height: 1rem;
+						height: var.$block-spacing;
 						background: color.$message;
 						color: color.$message-bg;
 						border-radius: var.$block-radius 0 0 var.$block-radius;
@@ -188,7 +188,7 @@
 
 					.temperature {
 						display: inline-block;
-						line-height: 1rem;
+						line-height: var.$block-spacing;
 						vertical-align: middle;
 						padding: var.$elem-spacing;
 						background: color.$message-bg;
diff --git a/src/styles/_page.project.map.scss b/src/styles/_page.project.map.scss
index 80998fd..28c8a3a 100644
--- a/src/styles/_page.project.map.scss
+++ b/src/styles/_page.project.map.scss
@@ -56,7 +56,7 @@ $thumbnail-max-size: 60px;
 		.track-stats {
 			display: grid;
 			grid-template-columns: repeat(2, minmax(0, 1fr));
-			gap: var.$elem-spacing;
+			gap: var.$elem-spacing var.$block-spacing;
 		}
 
 		.medias-list {
diff --git a/src/styles/_page.project.settings.scss b/src/styles/_page.project.settings.scss
index 1a9f476..22f7c44 100644
--- a/src/styles/_page.project.settings.scss
+++ b/src/styles/_page.project.settings.scss
@@ -10,7 +10,7 @@
 
 			.logo {
 				background: color.$default-bg;
-				padding: 2rem 1rem;
+				padding: 2rem var.$block-spacing;
 				border-radius: var.$block-radius var.$block-radius 0 0;
 
 				img {
@@ -24,7 +24,7 @@
 			#last_update {
 				position: absolute;
 				margin-top: -2em;
-				padding: 0 1rem;
+				padding: 0 var.$block-spacing;
 				width: calc(100% - 2rem);
 
 				p {
@@ -77,11 +77,11 @@
 
 			.settings-section {
 				display: inline-block;
-				margin: 1.5rem 1rem 0 1rem;
+				margin: 2rem var.$block-spacing 0 var.$block-spacing;
 				width: calc(100% - 2 * var.$block-spacing);
 
 				&:last-child {
-					margin-bottom: 1.5rem;
+					margin-bottom: 2rem;
 				}
 
 				h1 {
diff --git a/src/styles/_page.upload.scss b/src/styles/_page.upload.scss
index d964e12..f1d847f 100644
--- a/src/styles/_page.upload.scss
+++ b/src/styles/_page.upload.scss
@@ -1,3 +1,4 @@
+@use "var";
 @use "color";
 
 #upload {
@@ -5,8 +6,8 @@
 
 	.section {
 		border-radius: 3px;
-		margin-top: 1rem;
-		padding: 0 1rem 1rem 1rem;
+		margin-top: var.$block-spacing;
+		padding: 0 var.$block-spacing var.$block-spacing var.$block-spacing;
 		border-bottom: 1px solid color.$default-bg;
 }
 
@@ -27,7 +28,7 @@
 			display: inline-block;
 			width: calc(70% - 2rem);
 			min-width: calc(100% - 100px - 2rem);
-			padding: 1rem;
+			padding: var.$block-spacing;
 			vertical-align: top;
 			box-sizing: border-box;
 			
@@ -39,14 +40,14 @@
 			}
 			
 			.save {
-				margin-top: 1rem;
+				margin-top: var.$block-spacing;
 				padding: 0.5em;
 			}
 		}
 	}
 
 	.logs {
-		padding: 1rem;
+		padding: var.$block-spacing;
 
 		p.log {
 			margin: 0;