Update static/css/design.css

static/css/design.css

@@ -1,8 +1,6 @@
 body {
   overflow: hidden;
-  background-color: #121212; /* Dark background for the whole app */
-  color: #ffffff; /* Light text color for better contrast */
-  font-family: Arial, sans-serif; /* Optional: Set a default font for better appearance */
+  /*background-color: #121212; */
 }
 
 .mic-container {
@@ -16,7 +14,7 @@ body {
     width: 80px;
     height: 80px;
     border-radius: 50%;
-    background: #ffffff; /* Initial color of the microphone circle #4b83ad */
+    background: #4b83ad;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -42,7 +40,7 @@ body {
   }
 
   .circle.active {
-    background: #ff0000; /* Active color of the microphone circle */
+    background: #ff0000;
 
     &:before {
       background: gray;
@@ -75,28 +73,8 @@ body {
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
-  background: rgba(0, 0, 0, 0.8); /* Dark background for the output container */
-  color: #ffffff; /* Light text color for the output container */
+  background: rgba(255, 255, 255, 0.8);
   border-radius: 10px;
   padding: 10px 20px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
-}
-
-/* Style for the audio player container */
-#audioPlayerContainer {
-  position: fixed;
-  bottom: 80px; /* Adjust position based on your needs */
-  left: 50%;
-  transform: translateX(-50%);
-  background: rgba(0, 0, 0, 0.8); /* Dark background */
-  color: #ffffff; /* Light text color */
-  border-radius: 10px;
-  padding: 10px 20px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
-  display: none; /* Initially hidden */
-}
-
-#audioPlayer {
-  width: 100%;
-  /* Adjust styles for the audio player if needed */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }