@bagelink/vue 1.15.15 → 1.15.26

package/src/components/lightbox/Lightbox.vue

@@ -141,282 +141,284 @@ defineExpose({ open, close })
 </template>
 
 <style>
+
 .bgl-lightbox:has(.bgl_vid) {
-	width: 90vw;
+width: 90vw;
 }
 
 .bgl-lightbox:has(.vid_short) {
-	width: auto;
-	aspect-ratio: 9/16;
-	height: 90vh;
+width: auto;
+aspect-ratio: 9/16;
+height: 90vh;
 }
 
 .bgl-lightbox:has(.vid_short) .bgl-lightbox-item * {
-	max-height: unset !important;
+max-height: unset !important;
 }
 
 .lightbox-image {
-	object-fit: contain;
-	width: fit-content;
+object-fit: contain;
+width: fit-content;
 }
 
 .bgl-lightbox-overlay {
-	position: fixed;
-	width: 100vw;
-	height: 100vh;
-	display: grid;
-	grid-template-rows: 50px 1fr 100px;
-	z-index: 9999;
-	inset: 0;
-	background: rgba(0, 0, 0, 0.8);
-	overflow: hidden;
+position: fixed;
+width: 100vw;
+height: 100vh;
+display: grid;
+grid-template-rows: 50px 1fr 100px;
+z-index: 9999;
+inset: 0;
+background: rgba(0, 0, 0, 0.8);
+overflow: hidden;
 }
 
 /* Top controls row */
 .bgl-lightbox-overlay>.flex:first-child {
-	grid-row: 1;
-	align-self: start;
+grid-row: 1;
+align-self: start;
 }
 
 /* Main content row - Swiper */
 .bgl-lightbox-swiper {
-	grid-row: 2;
-	width: 100vw;
-	height: 100%;
-	overflow: hidden;
+grid-row: 2;
+width: 100vw;
+height: 100%;
+overflow: hidden;
 }
 
 /* Bottom thumbnails row */
 .lightbox-thumbnails {
-	grid-row: 3;
-	align-self: end;
+grid-row: 3;
+align-self: end;
 }
 
 .bgl-lightbox-swiper .swiper {
-	width: 100%;
-	height: 100%;
+width: 100%;
+height: 100%;
 }
 
 .bgl-lightbox-swiper .swiper-wrapper {
-	align-items: center;
+align-items: center;
 }
 
 .bgl-lightbox-item {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	height: 100%;
-	animation: 200ms ease bgl-lightbox-load;
+display: flex;
+align-items: center;
+justify-content: center;
+width: 100%;
+height: 100%;
+animation: 200ms ease bgl-lightbox-load;
 }
 
 /* Navigation button styling */
 .lightbox-nav-btn {
-	background: rgba(0, 0, 0, 0.6);
-	backdrop-filter: blur(8px);
-	border-radius: 50%;
-	width: 48px;
-	height: 48px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: white;
-	cursor: pointer;
-	transition: all 0.2s ease;
+background: rgba(0, 0, 0, 0.6);
+backdrop-filter: blur(8px);
+border-radius: 50%;
+width: 48px;
+height: 48px;
+display: flex;
+align-items: center;
+justify-content: center;
+color: white;
+cursor: pointer;
+transition: all 0.2s ease;
 }
 
 .lightbox-nav-btn:hover {
-	background: rgba(0, 0, 0, 0.8);
-	transform: scale(1.05);
+background: rgba(0, 0, 0, 0.8);
+transform: scale(1.05);
 }
 
 .lightbox-nav-btn:active {
-	transform: scale(0.95);
+transform: scale(0.95);
 }
 
 /* Adjust swiper navigation positioning */
 .bgl-lightbox-swiper :deep(.swi-ctrl) {
-	padding: 0 1.5rem !important;
+padding: 0 1.5rem !important;
 }
 
 @media screen and (max-width: 900px) {
-	.bgl-lightbox-swiper :deep(.swi-ctrl) {
-		padding: 0 1rem !important;
-	}
+.bgl-lightbox-swiper :deep(.swi-ctrl) {
+	padding: 0 1rem !important;
+}
 
-	.lightbox-nav-btn {
-		width: 40px;
-		height: 40px;
-	}
+.lightbox-nav-btn {
+	width: 40px;
+	height: 40px;
+}
 }
 
 @keyframes bgl-lightbox-load {
-	from {
-		opacity: 0;
-		transform: scale(0.95);
-	}
+from {
+	opacity: 0;
+	transform: scale(0.95);
+}
 
-	to {
-		opacity: 1;
-		transform: scale(1);
-	}
+to {
+	opacity: 1;
+	transform: scale(1);
+}
 }
 
 .lightbox-image,
 .lightbox-video,
 .lightbox-pdf,
 .lightbox-file {
-	max-width: 90vw;
-	max-height: calc(100vh - 140px);
-	object-fit: contain;
-	border-radius: 3px;
-	margin: auto;
+max-width: 90vw;
+max-height: calc(100vh - 140px);
+object-fit: contain;
+border-radius: 3px;
+margin: auto;
 }
 
 .lightbox-pdf {
-	width: 90vw;
-	height: calc(100vh - 140px);
+width: 90vw;
+height: calc(100vh - 140px);
 }
 
 .lightbox-pdf embed {
-	width: 100%;
-	height: 100%;
-	border: none;
-	border-radius: 3px;
+width: 100%;
+height: 100%;
+border: none;
+border-radius: 3px;
 }
 
 .lightbox-video iframe {
-	width: 90vw;
+width: 90vw;
 }
 
 .lightbox-video video {
-	width: 100%;
-	height: 100%;
+width: 100%;
+height: 100%;
 }
 
 .lightbox-image {
-	width: auto;
-	height: auto;
+width: auto;
+height: auto;
 }
 
 /* When zoomed, make image full width */
 .bgl-lightbox-swiper.zoomed .lightbox-image {
-	max-width: 100vw;
-	width: 100vw;
-	max-height: 100vh;
-	height: 100vh;
-	object-fit: contain;
+max-width: 100vw;
+width: 100vw;
+max-height: 100vh;
+height: 100vh;
+object-fit: contain;
 }
 
 .bgl-lightbox-swiper.zoomed .vue-zoomer {
-	width: 100vw;
-	height: 100vh;
+width: 100vw;
+height: 100vh;
 }
 
 .bgl-lightbox-swiper.zoomed .bgl-lightbox-item * {
-	max-height: calc(100vh - 90px);
-	height: calc(100vh - 90px);
+max-height: calc(100vh - 90px);
+height: calc(100vh - 90px);
 }
 
 .bgl-lightbox-swiper.zoomed {
-	pointer-events: none;
+pointer-events: none;
 }
 
 .bgl-lightbox-swiper.zoomed .vue-zoomer {
-	pointer-events: auto;
+pointer-events: auto;
 }
 
 .lightbox-thumbnails {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	gap: 0.75rem;
-	padding: 1rem;
-	overflow-x: auto;
-	overflow-y: hidden;
-	background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
-	width: 100%;
+display: flex;
+justify-content: center;
+align-items: center;
+gap: 0.75rem;
+padding: 1rem;
+overflow-x: auto;
+overflow-y: hidden;
+background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
+width: 100%;
 }
 
 .lightbox-thumbnails::-webkit-scrollbar {
-	height: 4px;
+height: 4px;
 }
 
 .lightbox-thumbnails::-webkit-scrollbar-track {
-	background: transparent;
+background: transparent;
 }
 
 .lightbox-thumbnails::-webkit-scrollbar-thumb {
-	background: rgba(255, 255, 255, 0.3);
-	border-radius: 2px;
+background: rgba(255, 255, 255, 0.3);
+border-radius: 2px;
 }
 
 .thumbnail {
-	height: 60px;
-	width: 60px;
-	min-width: 60px;
-	object-fit: cover;
-	border-radius: 6px;
-	cursor: pointer;
-	opacity: 0.6;
-	transition: all 0.2s ease;
-	flex-shrink: 0;
+height: 60px;
+width: 60px;
+min-width: 60px;
+object-fit: cover;
+border-radius: 6px;
+cursor: pointer;
+opacity: 0.6;
+transition: all 0.2s ease;
+flex-shrink: 0;
 }
 
 .thumbnail-icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background: rgba(255, 255, 255, 0.1);
+display: flex;
+align-items: center;
+justify-content: center;
+background: rgba(255, 255, 255, 0.1);
 }
 
 .thumbnail:hover {
-	opacity: 1;
-	transform: scale(1.05);
+opacity: 1;
+transform: scale(1.05);
 }
 
 .thumbnail:active {
-	transform: scale(0.95);
+transform: scale(0.95);
 }
 
 .thumbnail.active {
-	opacity: 1;
-	outline: 3px solid white;
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+opacity: 1;
+outline: 3px solid white;
+box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
 @media screen and (max-width: 910px) {
-	.bgl-lightbox-overlay {
-		grid-template-rows: 50px 1fr 70px;
-	}
+.bgl-lightbox-overlay {
+	grid-template-rows: 50px 1fr 70px;
+}
 
-	.lightbox-thumbnails {
-		justify-content: flex-start;
-		gap: 0.5rem;
-		padding: 0.75rem 1rem;
-	}
+.lightbox-thumbnails {
+	justify-content: flex-start;
+	gap: 0.5rem;
+	padding: 0.75rem 1rem;
+}
 
-	.thumbnail {
-		height: 50px;
-		width: 50px;
-		min-width: 50px;
-	}
+.thumbnail {
+	height: 50px;
+	width: 50px;
+	min-width: 50px;
+}
 }
 
 .file-info {
-	max-width: 420px
+max-width: 420px
 }
 
 @media screen and (max-width: 910px) {
-	.file-info {
-		max-width: 220px;
-		text-align: center !important;
-	}
+.file-info {
+	max-width: 220px;
+	text-align: center !important;
+}
 
-	.file-info * {
-		text-align: center !important;
-		margin-inline: 0 !important;
-		max-width: 100% !important;
-	}
+.file-info * {
+	text-align: center !important;
+	margin-inline: 0 !important;
+	max-width: 100% !important;
 }
+}
+
 </style>