feat: Added christmas lights to modals

frontend/src/App.vue

@@ -368,6 +368,141 @@ export default {
 
 .christmas-mode {
 	--primary-color: var(--red);
+
+	.christmas-lights {
+		position: absolute;
+		width: 100%;
+		height: 50px;
+		left: 0;
+		top: 64px;
+		display: flex;
+		justify-content: space-around;
+		overflow: hidden;
+		pointer-events: none;
+
+		.christmas-light {
+			height: 34px;
+			width: 12px;
+			border-top-left-radius: 50%;
+			border-top-right-radius: 50%;
+			border-bottom-left-radius: 50%;
+			border-bottom-right-radius: 50%;
+			z-index: 2;
+			box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1),
+				0 0 10px rgba(10, 10, 10, 0.1);
+			animation: christmas-lights 30s ease infinite;
+
+			&::before {
+				content: "";
+				display: block;
+				width: 12px;
+				height: 12px;
+				background-color: rgb(6, 49, 19);
+				border-top-left-radius: 25%;
+				border-top-right-radius: 25%;
+				border-bottom-left-radius: 25%;
+				border-bottom-right-radius: 25%;
+			}
+
+			&:nth-of-type(1) {
+				transform: rotate(5deg);
+			}
+
+			&:nth-of-type(2) {
+				transform: rotate(-7deg);
+				animation-delay: -5s;
+			}
+
+			&:nth-of-type(3) {
+				transform: rotate(3deg);
+				animation-delay: -10s;
+			}
+
+			&:nth-of-type(4) {
+				transform: rotate(10deg);
+				animation-delay: -15s;
+			}
+
+			&:nth-of-type(5) {
+				transform: rotate(-3deg);
+				animation-delay: -20s;
+			}
+
+			&:nth-of-type(6) {
+				transform: rotate(8deg);
+				animation-delay: -25s;
+			}
+
+			&:nth-of-type(7) {
+				transform: rotate(-1deg);
+				animation-delay: -30s;
+			}
+
+			&:nth-of-type(8) {
+				transform: rotate(-4deg);
+				animation-delay: -35s;
+			}
+
+			&:nth-of-type(9) {
+				transform: rotate(3deg);
+				animation-delay: -40s;
+			}
+
+			&:nth-of-type(10) {
+				transform: rotate(-10deg);
+				animation-delay: -45s;
+			}
+		}
+
+		.christmas-wire {
+			flex: 1;
+			margin-bottom: 15px;
+			z-index: 1;
+
+			border-top: 2px solid var(--primary-color);
+			border-radius: 50%;
+			margin-left: -7px;
+			margin-right: -7px;
+			transform: scaleY(-1);
+			transform-origin: 0% 20%;
+		}
+	}
+}
+
+@keyframes christmas-lights {
+	0% {
+		background-color: magenta;
+	}
+	10% {
+		background-color: cyan;
+	}
+	20% {
+		background-color: lime;
+	}
+	30% {
+		background-color: yellow;
+	}
+	40% {
+		background-color: orange;
+	}
+	50% {
+		background-color: red;
+	}
+	60% {
+		background-color: magenta;
+	}
+	70% {
+		background-color: cyan;
+	}
+	80% {
+		background-color: lime;
+	}
+	90% {
+		background-color: orange;
+	}
+	100% {
+		background-color: magenta;
+	}
 }
 
 /* inter-regular - latin */

frontend/src/components/Modal.vue

@@ -15,6 +15,32 @@
 				<span class="delete material-icons" @click="closeCurrentModal()"
 					>highlight_off</span
 				>
+				<div
+					v-if="christmas"
+					:class="{ 'christmas-lights': true, loggedIn }"
+				>
+					<div class="christmas-wire"></div>
+					<span class="christmas-light"></span>
+					<div class="christmas-wire"></div>
+					<span class="christmas-light"></span>
+					<div class="christmas-wire"></div>
+					<span class="christmas-light"></span>
+					<div class="christmas-wire"></div>
+					<span class="christmas-light"></span>
+					<div class="christmas-wire"></div>
+					<span class="christmas-light"></span>
+					<div class="christmas-wire"></div>
+					<span class="christmas-light"></span>
+					<div class="christmas-wire"></div>
+					<span class="christmas-light"></span>
+					<div class="christmas-wire"></div>
+					<span class="christmas-light"></span>
+					<div class="christmas-wire"></div>
+					<span class="christmas-light"></span>
+					<div class="christmas-wire"></div>
+					<span class="christmas-light"></span>
+					<div class="christmas-wire"></div>
+				</div>
 			</header>
 			<section class="modal-card-body">
 				<slot name="body" />
@@ -27,7 +53,7 @@
 </template>
 
 <script>
-import { mapActions } from "vuex";
+import { mapState, mapActions } from "vuex";
 
 export default {
 	props: {
@@ -35,8 +61,19 @@ export default {
 		wide: { type: Boolean, default: false },
 		split: { type: Boolean, default: false }
 	},
-	mounted() {
+	data() {
+		return {
+			christmas: false
+		};
+	},
+	computed: {
+		...mapState({
+			loggedIn: state => state.user.auth.loggedIn
+		})
+	},
+	async mounted() {
 		this.type = this.toCamelCase(this.title);
+		this.christmas = await lofig.get("siteSettings.christmas");
 	},
 	methods: {
 		toCamelCase: str =>

frontend/src/components/layout/MainHeader.vue

@@ -324,147 +324,6 @@ export default {
 	}
 }
 
-.christmas-lights {
-	position: absolute;
-	width: 100%;
-	height: 50px;
-	left: 0;
-	top: 64px;
-	display: flex;
-	justify-content: space-around;
-	overflow: hidden;
-	pointer-events: none;
-
-	.christmas-light {
-		height: 34px;
-		width: 12px;
-		border-top-left-radius: 50%;
-		border-top-right-radius: 50%;
-		border-bottom-left-radius: 50%;
-		border-bottom-right-radius: 50%;
-		z-index: 2;
-		box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1),
-			0 0 10px rgba(10, 10, 10, 0.1);
-		animation: christmas-lights 30s ease infinite;
-
-		&::before {
-			content: "";
-			display: block;
-			width: 12px;
-			height: 12px;
-			background-color: rgb(6, 49, 19);
-			border-top-left-radius: 25%;
-			border-top-right-radius: 25%;
-			border-bottom-left-radius: 25%;
-			border-bottom-right-radius: 25%;
-		}
-
-		&:nth-of-type(1) {
-			transform: rotate(5deg);
-		}
-
-		&:nth-of-type(2) {
-			transform: rotate(-7deg);
-			animation-delay: -5s;
-		}
-
-		&:nth-of-type(3) {
-			transform: rotate(3deg);
-			animation-delay: -10s;
-		}
-
-		&:nth-of-type(4) {
-			transform: rotate(10deg);
-			animation-delay: -15s;
-		}
-
-		&:nth-of-type(5) {
-			transform: rotate(-3deg);
-			animation-delay: -20s;
-		}
-
-		&:nth-of-type(6) {
-			transform: rotate(8deg);
-			animation-delay: -25s;
-		}
-
-		&:nth-of-type(7) {
-			transform: rotate(-1deg);
-			animation-delay: -30s;
-		}
-
-		&:nth-of-type(8) {
-			transform: rotate(-4deg);
-			animation-delay: -35s;
-		}
-
-		&:nth-of-type(9) {
-			transform: rotate(3deg);
-			animation-delay: -40s;
-		}
-
-		&:nth-of-type(10) {
-			transform: rotate(-10deg);
-			animation-delay: -45s;
-		}
-	}
-
-	.christmas-wire {
-		flex: 1;
-		margin-bottom: 15px;
-		z-index: 1;
-
-		// top: -15px;
-		// border-color: blue transparent transparent transparent;
-		border-top: 2px solid var(--primary-color);
-		border-radius: 50%;
-		margin-left: -7px;
-		margin-right: -7px;
-		transform: scaleY(-1);
-		transform-origin: 0% 20%;
-		// border-radius: 50%/100px 100px 0 0;
-
-		// border-radius: 50%;
-		// background-color: blue;
-	}
-}
-
-@keyframes christmas-lights {
-	0% {
-		background-color: magenta;
-	}
-	10% {
-		background-color: cyan;
-	}
-	20% {
-		background-color: lime;
-	}
-	30% {
-		background-color: yellow;
-	}
-	40% {
-		background-color: orange;
-	}
-	50% {
-		background-color: red;
-	}
-	60% {
-		background-color: magenta;
-	}
-	70% {
-		background-color: cyan;
-	}
-	80% {
-		background-color: lime;
-	}
-	90% {
-		background-color: orange;
-	}
-	100% {
-		background-color: magenta;
-	}
-}
-
 @media screen and (max-width: 768px) {
 	.nav-toggle {
 		display: block !important;