Edit iframe loading animations

public/assets/css/main.scss

@@ -14,6 +14,10 @@ body {
 	font-size: var(--text-font-size);
 	line-height: var(--text-line-height);
 	color: var(--black);
+	background-color: var(--feldgrau);
+}
+
+.body--white-background {
 	background-color: var(--white);
 }
 
@@ -133,7 +137,7 @@ body {
 	flex-direction: column;
 	justify-content: space-between;
 	align-items: flex-start;
-	background-color: var(--white);
+	background-color: transparent;
 	transition: background-color 400ms ease-in-out;
 
 	.sidebar__nav {
@@ -185,7 +189,6 @@ body {
 
 	&--slimmed {
 		width: 15%;
-		background-color: transparent;
 
 		.sidebar__nav-link {
 			color: var(--transparent-black);
@@ -197,7 +200,7 @@ body {
 		}
 
 		&:hover {
-			background-color: var(--transparent-white);
+			background-color: var(--transparent-feldgrau);
 
 				
 			.sidebar__nav-link {
@@ -209,7 +212,13 @@ body {
 				fill: var(--black);
 			}
 		}
+	}
 
+	&--white-background {
+
+		&:hover {
+			background-color: var(--transparent-white);
+		}
 	}
 }
 
@@ -228,7 +237,7 @@ body {
 	opacity: 0;
 	width: 100%;
 	height: 100%;
-	padding: 0 0 0 15%;
+	// padding: 0 0 0 15%;
 	transition: opacity 400ms ease-in-out;
 
 	&--visible {

public/assets/css/partials/animations.scss

@@ -11,21 +11,6 @@
 	}
 }
 
-@keyframes rotate-vertical-left {
-	0% {
-		transform: rotateY(0);
-		transform-origin: left;
-	}
-	50% {
-		transform: rotateY(180deg);
-		transform-origin: left;
-	}
-	100% {
-		transform: rotateY(0);
-		transform-origin: left;
-	}
-}
-
 @keyframes rotate-horizontal-bottom {
 	0% {
 		transform: rotateX(0);

public/assets/css/partials/variables.scss

@@ -38,6 +38,7 @@
 	--white: #fff;
 	--transparent-white: rgba(255, 255, 255, 0.9);
 	--feldgrau: #4B6259;
+	--transparent-feldgrau: rgba(75, 98, 89, 0.9);
 }
 
 // Media queries