Replace lightbox icons

src/scripts/lightbox.js

@@ -1,3 +1,6 @@
+import { icon } from '@fortawesome/fontawesome-svg-core';
+import { getIcon } from './icons.js';
+
 const defaults = {
 	albumLabel: 'Image %1 of %2',
 	alwaysShowNavOnTouchDevices: false,
@@ -14,6 +17,8 @@ const defaults = {
 	onClosing: () => {}
 };
 
+
+
 class Lightbox {
 	constructor() {
 		this.album = [];
@@ -59,6 +64,10 @@ class Lightbox {
 		this.start(link);
 	}
 
+	renderIcon(name) {
+		return icon(getIcon(name), {classes: ['spot-icon', name]}).html;
+	}
+
 	build() {
 		if (document.getElementById('lightbox')) return;
 
@@ -71,14 +80,14 @@ class Lightbox {
 						<img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" />
 						<div class="lb-nav">
 							<div class="lb-prev-area">
-								<a class="lb-prev" aria-label="Previous image" href="" role="button"></a>
+								<a class="lb-prev" aria-label="Previous image" href="" role="button">${this.renderIcon('prev')}</a>
 							</div>
 							<div class="lb-next-area">
-								<a class="lb-next" aria-label="Next image" href="" role="button"></a>
+								<a class="lb-next" aria-label="Next image" href="" role="button">${this.renderIcon('next')}</a>
 							</div>
 						</div>
 						<div class="lb-loader">
-							<a class="lb-cancel" href="#"></a>
+							<a class="lb-cancel" href="#">${this.renderIcon('cancel')}</a>
 						</div>
 					</div>
 				</div>
@@ -88,7 +97,7 @@ class Lightbox {
 							<span class="lb-caption"></span>
 						</div>
 						<div class="lb-closeContainer">
-							<a class="lb-close" role="button"></a>
+							<a class="lb-close" href="#" role="button">${this.renderIcon('close')}</a>
 						</div>
 					</div>
 				</div>

src/styles/_lightbox.scss

@@ -1,28 +1,6 @@
 @use "common";
 @use "color";
 
-@mixin lightbox-icon($icon) {
-	background: none;
-	font-size: 2em;
-	display: inline-block;
-	line-height: 1;
-
-	&:before {
-		@if $icon == prev {
-			content: "‹";
-		}
-		@else if $icon == next {
-			content: "›";
-		}
-		@else if $icon == close {
-			content: "×";
-		}
-		@else if $icon == cancel {
-			content: "□";
-		}
-	}
-}
-
 body.lb-disable-scrolling {
 	overflow: hidden;
 }
@@ -102,9 +80,9 @@ body.lb-disable-scrolling {
 					line-height: 1.33333333em;
 
 					&.comment {
-						.spot-icon {
+						.spot-icon {
-							vertical-align: center;
+							vertical-align: center;
-						}
+						}
 						.comment-text {
 							display: inline-block;
 							width: calc(100% - 1.25em*1.33333333333 - 0.5rem);
@@ -201,8 +179,7 @@ body.lb-disable-scrolling {
 					cursor: pointer;
 					color: color.$over-img;
 					text-decoration: none;
-					text-align: center;
+					filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
-					text-shadow: 0px 1px 1px color.$over-img-shadow;
 					width: 150px;
 					height: 150px;
 					position: absolute;
@@ -211,25 +188,26 @@ body.lb-disable-scrolling {
 					transition: opacity 0.3s, color 0.3s;
 					opacity: 0;
 					outline: none;
-					
+					font-size: 2em;
-					&:before {
-						position: absolute;
-						top: 50%;
-						transform: translate(-50%, -50%);
-					}
 
 					&:hover {
 						color: color.$over-img-hover;
 					}
+
+					.spot-icon {
+						vertical-align: inherit;
+						top: 50%;
+						transform: translate(-50%, -50%);
+						position: relative;
+						left: 50%;
+					}
 				}
 			
 				a.lb-prev {
-					@include lightbox-icon(prev);
 					left: 0;
 				}
 			
 				a.lb-next {
-					@include lightbox-icon(next);
 					right: 0;
 				}
 			}
@@ -244,8 +222,8 @@ body.lb-disable-scrolling {
 				line-height: 0;
 
 				.lb-cancel {
-					@include lightbox-icon(cancel);
 					@extend .flicker;
+					font-size: 2em;
 					color: color.$default;
 					text-decoration: none;
 				}
@@ -275,13 +253,13 @@ body.lb-disable-scrolling {
 			}
 
 			.lb-closeContainer .lb-close {
-				@include lightbox-icon(close);
 				@extend .clickable;
 				height: auto;
 				font-size: 1.3333333333em;
 				line-height: 1em;
 				text-align: center;
 				width: 1.25em;
+				color: color.$default-inv;
 
 				&:hover {
 					color: color.$default-inv-hover;

src/styles/_page.project.feed.scss

@@ -131,7 +131,7 @@
 
 						.drill-hover-icon {
 							display: none;
-							text-shadow: color.$over-img-shadow 3px 3px 3px;
+							filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
 						}
 					}
 
@@ -241,7 +241,7 @@
 								.drill-icon {
 									.drill-image, .drill-video {
 										color: color.$media-bg;
-										text-shadow: color.$over-img-shadow 3px 3px 3px;
+										filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
 									}
 								}
 

src/styles/_page.project.scss

@@ -29,7 +29,7 @@
 			left: 50%;
 			transform: translate(-50%, -50%);
 			font-size: 2.5em;
-			filter: drop-shadow(3px 3px 3px color.$over-img-shadow);
+			filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
 
 			&.message {
 				transform: translate(-50%, -100%);
@@ -46,7 +46,7 @@
 	.spot-icon-stack {
 		&:not(.drill-icon) {
 			font-size: 2.5em;
-			filter: drop-shadow(3px 3px 3px color.$over-img-shadow);
+			filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
 		}
 
 		&.message {