feat: Add a breadcrumb

2025-08-19 09:54:49 +02:00
parent 90340d03aa
commit 686ece4479
55 changed files with 24172 additions and 2 deletions
--- a/assets/css/scss/elements/_lightbox.scss
+++ b/assets/css/scss/elements/_lightbox.scss
@@ -0,0 +1,180 @@
+//
+// Lightbox Styles //
+//
+.lightbox-image-box, 
+.lightbox-media-box {
+	position: relative;
+	overflow: hidden;
+	display: block;
+	&[class*='border-radius'] {
+		@include transform(translate3d(0,0,0));
+	}
+	&:after {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		opacity: 0;
+		background: get-color("dark", 0.1);
+		@include transition(ease-out 0.12s);
+	}
+	img {
+		@include transform(scale(1));
+		@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
+	}
+	i {
+		z-index: 1;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		@include transform(translate(-50%, -50%));
+		background: get-color("dark", 0.6);
+		width: 60px;
+		height: 60px;
+		border-radius: 50%;
+		text-align: center;
+		line-height: 60px;
+		color: get-color("white", 0.9);
+		@include transition(ease-out 0.16s);
+	}
+	&.icon-xl, &.icon-2xl {
+		i {
+			width: 70px;
+			height: 70px;
+			line-height: 70px;
+		}
+	}
+	&.icon-3xl, &.icon-4xl, &.icon-5xl {
+		i {
+			width: 80px;
+			height: 80px;
+			line-height: 80px;
+		}
+	}
+	&:hover {
+		&:after {
+			opacity: 1;
+		}
+		img {
+			@include transform(scale(1.04));
+		}
+		i {
+			@include transform(translate(-50%, -50%) scale(0.94));
+		}
+	}
+}
+
+.mfp-bg {
+	background: black;
+}
+.mfp-container,
+.mfp-bg {
+	opacity: 0;
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+	@include transition(ease-out 0.16s);
+}
+.mfp-container {
+	@include transform(scale(0.98));
+	padding: 0 20px;
+}
+.mfp-ready {
+	.mfp-container {
+		@include transform(scale(1));
+		opacity: 1;
+	}
+	&.mfp-bg {
+		opacity: 0.97;
+	}
+}
+.mfp-removing {
+	.mfp-container, 
+	&.mfp-bg {
+		opacity: 0;
+	}
+	.mfp-container {
+		@include transform(scale(0.98));
+	}
+}
+
+button {
+	&.mfp-close {
+		display: block;
+		top: -5px;
+		opacity: 1;
+		width: auto;
+		height: auto;
+		line-height: auto;
+		font-size: 24px;
+		@include transition(linear 0.1s);
+		&:hover {
+			top: -5px;
+			opacity: 1;
+			color: #fff;
+		}
+	}
+}
+.mfp-iframe-holder {
+	.mfp-close {
+		top: -45px;
+		&:hover { top: -45px; }
+	}
+}
+.mfp-close-btn-in {
+	.mfp-close {
+		color: rgba(255, 255, 255, 0.7);
+	}
+}
+
+.mfp-arrow {
+	@include transition(linear 0.1s);
+}
+.mfp-arrow-left {
+	&:before { border-right: 0; }
+}
+.mfp-arrow-right {
+	&:before { border-left: 0; }
+}
+
+@include breakpoint-less(xs) {
+	button.mfp-arrow {
+		background: get-color("dark", 0.5);
+		width: 70px;
+		height: 70px;
+		margin-top: -35px;
+		&:active {
+			margin-top: -35px;
+		}
+	}
+	button.mfp-arrow-left {
+		margin-left: 20px;
+		&:before, &:after {
+			margin-top: 15px;
+			margin-left: 20px;
+		}
+	}
+	button.mfp-arrow-right {
+		margin-right: 20px;
+		&:before, &:after {
+			margin-top: 15px;
+			margin-left: 30px;
+		}
+	}
+}
+
+.mfp-bottom-bar {
+	margin-top: -30px;
+	.mfp-title {
+		color: get-color("white", 0.7);
+	}
+	.mfp-counter {
+		color: get-color("white", 0.6);
+		font-size: 14px;
+	}
+}
+
+.mfp-iframe-scaler iframe, .mfp-figure::after {
+	@include box-shadow(0 0 14px 0 rgba(0,0,0,0.3));
+}