Initial

Visualisation/css/visualiser.css

@@ -0,0 +1,66 @@
+:root {
+    --bg-color: #303030;        /*Ez a pulse háttérszíne, a canvasét jsben kell megváltoztatni */
+    --pulse-color: #AAAAAA;
+}
+
+.simulationContainer {
+    transform: matrix(0.87,-0.50,0.93,0.62,0,0);
+    -ms-transform: matrix(0.87,-0.50,0.93,0.62,0,0);
+    -webkit-transform: matrix(0.87,-0.50,0.93,0.62,0,0);
+
+    margin: 2em calc((50% - 350px) / 2);
+}
+
+.simulationContainer > .passedCarCount {
+    font-size: 2.5em;
+
+	width: 90%;
+    margin-top: 0.33em;
+	text-align: right;
+
+	text-shadow: -10px 10px 5px rgba(0, 0, 0, 0.35);
+}
+
+.simulationContainer > canvas {
+	background: linear-gradient(270deg, var(--bg-color) 0%, var(--bg-color) 40%, var(--pulse-color) 50%, var(--bg-color) 60%, var(--bg-color) 100%);
+	background-size: 600% 600%;
+	-webkit-animation: pulsing 10s ease infinite;
+	-moz-animation: pulsing 10s ease infinite;
+	animation: pulsing 10s ease infinite;
+
+	box-shadow: -15px 10px 5px rgba(0, 0, 0, 0.1);
+}
+
+@-webkit-keyframes pulsing {
+    0% {
+    	background-position: 0% 51%;
+    }
+    50% {
+    	background-position: 100% 50%;
+    }
+    100% {
+    	background-position: 0% 51%;
+    }
+}
+@-moz-keyframes pulsing {
+    0% {
+    	background-position: 0% 51%;
+    }
+    50% {
+    	background-position: 100% 50%;
+    }
+    100% {
+    	background-position: 0% 51%;
+    }
+}
+@keyframes pulsing { 
+    0% {
+    	background-position: 0% 51%;
+    }
+    50% {
+    	background-position: 100% 50%;
+    }
+    100% {
+    	background-position: 0% 51%;
+    }
+}