Merge lightbox CSS

src/styles/_lightbox.scss

@@ -3,8 +3,6 @@
 @use "fa";
 @use "color";
 
-@use "lightbox/lightbox";
-
 @mixin lightbox-icon($icon) {
 	background: none;
 	font-size: 2em;
@@ -12,9 +10,20 @@
 	@extend .#{variables.$fa-css-prefix}-#{$icon};
 }
 
+body.lb-disable-scrolling {
+	overflow: hidden;
+}
+
 .lightboxOverlay {
+	position: absolute;
+	top: 0;
+	left: 0;
 	bottom: 0;
 	right: 0;
+	z-index: 9999;
+	background-color: black;
+	opacity: 0.8;
+	display: none;
 	outline: none;
 }
 
@@ -22,6 +31,9 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	position: absolute;
+	z-index: 10000;
+	outline: none;
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
@@ -77,6 +89,9 @@
 					line-height: 1.33333333em;
 
 					&.comment {
+						.fa {
+							vertical-align: center;
+						}
 						.comment-text {
 							display: inline-block;
 							width: calc(100% - 1.25em*1.33333333333 - 0.5rem);
@@ -92,17 +107,24 @@
 			}
 		}
 	}
-	
-	/* Image */
 
 	.lb-outerContainer {
+		position: relative;
+		width: 250px;
+		height: 250px;
 		margin: 0;
 		border-radius:0;
 		background-color: color.$default-bg-trans;
-		
+	
+		&:after {
+			content: "";
+			display: table;
+			clear: both;
+		}
+
 		.lb-container {
 			overflow: hidden;
-		
+
 			&.moveable {
 				cursor: grab;
 			}
@@ -112,28 +134,39 @@
 			}
 
 			.lb-image {
-				image-orientation: from-image;
+				display: block;
+				height: auto;
+				max-width: inherit;
+				max-height: none;
 				border-radius: 0;
 				border: none;
+
+				image-orientation: from-image;
 				--translate-x: 0;
 				--translate-y: 0;
 				--scale: 1;
-				
 				transform:
 					translateX(var(--translate-x, 0))
 					translateY(var(--translate-y, 0))
 					scale(var(--scale, 1));
 			}
-		
+
 			.lb-video {
 				box-sizing: content-box;
 			}
+
 			&.lb-video-nav .lb-nav {
 				top: 100px;
 				height: calc(100% - 200px); //Leave space for video progress bar
 			}
-			
+
 			.lb-nav {
+				position: absolute;
+				top: 0;
+				left: 0;
+				height: 100%;
+				width: 100%;
+				z-index: 10;
 
 				.lb-prev-area, .lb-next-area {
 					position: absolute;
@@ -152,24 +185,28 @@
 				}
 
 				a.lb-prev, a.lb-next {
+					cursor: pointer;
 					color: color.$over-img;
 					text-decoration: none;
+					text-align: center;
 					text-shadow: 0px 1px 1px color.$over-img-shadow;
 					width: 150px;
 					height: 150px;
 					position: absolute;
 					top: 50%;
 					transform: translateY(-50%);
-
-					-webkit-transition: opacity 0.4s;
-					-moz-transition: opacity 0.4s;
-					-o-transition: opacity 0.4s;
-					transition: opacity 0.4s;
+					transition: opacity 0.3s, color 0.3s;
+					opacity: 0;
+					outline: none;
 					
 					&:before {
 						position: absolute;
 						top: 50%;
-						transform: translateY(-50%);
+						transform: translate(-50%, -50%);
+					}
+
+					&:hover {
+						color: color.$over-img-hover;
 					}
 				}
 			
@@ -183,13 +220,30 @@
 					right: 0;
 				}
 			}
+
+			.lb-loader {
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+				left: 0;
+				width: 100%;
+				text-align: center;
+				line-height: 0;
+
+				.lb-cancel {
+					@include lightbox-icon(cancel);
+					@extend .flicker;
+					color: color.$default;
+					text-decoration: none;
+				}
+			}
 		}
 	}
-	/* Titles */
 
 	.lb-dataContainer {
 		margin: 0;
 		padding: 0;
+		width: 100%;
 		flex: 0 0 auto;
 		overflow: hidden;
 		
@@ -197,6 +251,7 @@
 			text-align: left;
 			padding: 0.5rem 0.5rem 0 0.5rem;
 			display: flex;
+			color: color.$default-inv;
 			
 			.lb-details {
 				float: none;
@@ -206,22 +261,19 @@
 				}
 			}
 
-			.lb-closeContainer  .lb-close {
+			.lb-closeContainer .lb-close {
 				@include lightbox-icon(close);
 				@extend .fa-lg;
 				@extend .fa-fw;
+				@extend .clickable;
 				height: auto;
 				font-size: 1.3333333333em;
 				line-height: 1em;
-				color: color.$over-img;
+
+				&:hover {
+					color: color.$default-inv-hover;
+				}
 			}
 		}
 	}
-
-	.lb-cancel {
-		@include lightbox-icon(cancel);
-		@extend .flicker;
-		color: color.$default-inv;
-		text-decoration: none;
-	}
 }