Update static/MenuStyle.css

static/MenuStyle.css

@@ -1,12 +1,18 @@
 
+
+#LegendHist {
+  margin-left: 2px;
+}
+
 /********************************************************************/
 /* Style the tab */
 
 .tab {
   display: flex;
   align-items: center;
+  height: 47px;
   justify-content: flex-start;
-  gap: 10px; /* Adds spacing between elements */
+  gap: 0px; /* Adds spacing between elements */
     overflow: hidden;
   /* border: 1px solid black; */
   background-color:black;
@@ -14,10 +20,13 @@
 }
 
 .tablinks {
+  width: 135px;       /* Sets the fixed width */
+  min-width: 135px;   /* Prevents it from shrinking */
+  max-width: 135px;   /* Prevents it from expanding */
   color:white;
-  font-size: 18px;
+  font-size: 16px;
   text-decoration: none;
-  padding: 10px;
+  padding: 0px;
   /* font-weight: bold; */
   /* color: #000; */
   /* background-color: #f0f0f0; */
@@ -25,6 +34,10 @@
   cursor: pointer;
   font-family: Arial, sans-serif;
 }
+.tablinks:hover{
+  color:#51c5eb;
+
+}
 /* Style the buttons that are used to open the tab content */
 .tab button {
   background-color: inherit;
@@ -32,14 +45,11 @@
   border: none;
   outline: none;
   cursor: pointer;
-  padding: 14px 16px;
+  padding: 14px 8px;
   transition: 0.3s;
 }
 
 /* Change background color of buttons on hover */
-.tab button:hover {
-  background-color: rgb(0, 60, 255);
-}
 
 /* Create an active/current tablink class */
 .tab button.active {
@@ -205,9 +215,108 @@ cursor: pointer;
 
 /* i info button*/
 #infoImg{
-  width:30px;
+  width:20px;
   margin-top: -5px;
-  margin-bottom: -10px;
+  margin-bottom: -8px;
   
   /* margin-left: -200px; */
-} 
+}
+
+
+
+#dynamicTabs {
+  display: flex;
+  overflow-x: auto;  /* Enables horizontal scrolling */
+  white-space: nowrap;  /* Prevent line breaks inside the container */
+  gap: 1px;  /* Optional: adds spacing between tabs */
+  width: 1100px; 
+  margin-left:8px;
+}
+
+#dynamicTabs .tablinks {
+  background-color: #333;  /* Background color for each tab */
+  color: white;  /* Text color */
+  border: none;
+  padding: 10px 2px;
+  margin:3px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+#dynamicTabs .tablinks:hover {
+  background-color: rgb(0, 60, 255);  /* Background color on hover */
+  color:#51c5eb;
+}
+
+#dynamicTabs .tablinks .fa-times {
+  cursor: pointer;
+  margin-left: 10px;
+}
+
+#dynamicTabs .tablinks .fa-times:hover {
+  color: red;  /* Change color when hover over the close icon */
+}
+
+
+/* Customize the scrollbar */
+#dynamicTabs::-webkit-scrollbar {
+  height: 3px; /* Adjust the height of the scrollbar */
+}
+
+#dynamicTabs::-webkit-scrollbar-track {
+  background: #f1f1f1; /* Set the track (background) color */
+  border-radius: 0px; /* Optional: round the corners of the scrollbar track */
+}
+
+#dynamicTabs::-webkit-scrollbar-thumb {
+  background: #888; /* Set the color of the scroll thumb */
+  border-radius: 2px; /* Optional: round the corners of the thumb */
+  transition: background-color 0.3s ease; /* Smooth transition on hover */
+}
+
+#dynamicTabs::-webkit-scrollbar-thumb:hover {
+  background: #555; /* Darker color when hovering over the scrollbar thumb */
+}
+
+#dynamicTabs::-webkit-scrollbar-button {
+  display: none; /* Hide the scrollbar buttons (arrows) */
+}
+/* Styling for the dynamic dropdown container */
+.dynamicdropdownclass {
+  position: relative;
+  display: inline-block;
+  cursor: pointer; /* Indicates the container is interactive */
+}
+
+/* Styling for the dropdown content (FramestabsDropdown) */
+#FramestabsDropdown {
+  display: none;
+  position:fixed;
+  background-color: #f1f1f1;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  padding: 10px 0;
+  background-color:gray;
+  margin-left:65%;
+  
+}
+
+/* Styling for the label (tab) links inside the dropdown */
+#FramestabsDropdown .tabslabel {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  background-color: #fff;
+  border: none;
+  text-align: left;
+  background-color:gray;
+  
+}
+
+/* Hover effect for the label links inside the dropdown */
+#FramestabsDropdown .tabslabel:hover {
+  background-color: #ddd;
+}
+