Change settings bar

webradar/styles.css

@@ -6,6 +6,9 @@ body {
     align-items: center;
     height: 100vh;
     background-color: #000000; /* Change the background color as needed */
+    background-image: url('assets/image/background.png');
+    background-repeat: repeat;
+    background-size: 128px 128px;
 }
 
 #canvasContainer {
@@ -23,12 +26,27 @@ canvas {
 }
 
 #settingsHolder {
-    visibility: hidden;
-    position: absolute;
-    top: inherit;
-    left: inherit;
-    width: inherit;
-    height: 20%;
+    visibility: visible;
+    position: fixed;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    width: auto;
+    height: auto;
+    z-index: 100;
+}
+
+#settingsHolder .settings {
+    display: flex;
+    flex-direction: column;
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: white;
+    visibility: visible;
+    opacity: 0.8;
+    padding: 10px;
+    background-color: rgba(25, 25, 25, 0.7);
+    border-radius: 5px;
+    transition: opacity 0.3s ease;
 }
 
 #settingsHolder:hover .settings {