Update static/style.css

static/style.css

@@ -25,7 +25,48 @@
     background-color: #f1cece;/*lightgrey; */
     opacity: 0.7;
   }
-  
+  .graynavbarLegend{
+    /* list-style-type: none; */
+    /* margin: 0; */
+    /* padding: 0; */
+    /* right:10px; */
+    /* left:7px;  */
+    /* overflow: hidden; */
+    background-color: #b2b2b2;
+    height: 35px;
+    /* max-width: 99%; */
+    position: relative;
+    /* z-index:-1; */
+
+  }
+  .graynavbarLegend label{
+    float: left;
+    display: block;
+    color: black;
+    text-align: center;
+    /* padding: 7px 16px; */
+    text-decoration: none;
+    font-family: "acumin-pro", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 16px;
+    margin-left: 7px;
+
+  }
+  .graynavbarLegend .label2{
+    color: blue;
+  }
+  #infoImg{
+    width:30px;
+    margin-top: -5px;
+    margin-bottom: -10px;
+    
+    /* margin-left: -200px; */
+  }
+  .sortbutton{
+    background-color: transparent;
+    border: transparent;
+  }
   /* Style the accordion panel. Note: hidden by default */
   .panel {
     padding: 0 18px;
@@ -37,22 +78,6 @@
 
 
 
-#pagetitle{
-    font-family: "acumin-pro", sans-serif;
-    font-weight: 400;
-    font-style: normal;
-    font-size: 30px;
-    text-align:left;
-    padding-top: 30px;
-    align-items: left;
-    justify-content: left;
-    margin-left: 2%;
-    /* margin-right: -50%; */
-    color: white;
-
-     
-
-}
 #rightside{
    
     margin-left:430px ;
@@ -119,13 +144,15 @@
     border-radius: 5px;
     cursor: pointer;
     box-shadow: 2px 2px 2px gray;
+    color: black;
+    font-weight: 400;
     
     width: 51ch;
 
 }
 
 #measurementselectionsid{
-    margin-top: 1px ;
+    /* margin-top: 1px ; */
     width: 15ch;
     height: 30px;
     margin-left: 5px ;
@@ -154,7 +181,7 @@
     margin-left: 8px ;
     font-size: 13px;
     position: absolute;
-    margin-top: 1px;
+    margin-top: 10px;
     color: black;
     /* font-style: italic; */
    
@@ -165,7 +192,7 @@
     font-weight: 400;
     font-style: normal;
     margin-left: 13px ;
-    margin-top: 2px;
+    margin-top: 10px;
     font-size: 12;
     cursor: pointer;
     max-width: 50%;
@@ -178,7 +205,7 @@
 #measureADRbutton{
     background-color: #16c72e;
     border: none;
-    padding: 10px 121px;
+    padding: 10px 102px;
     cursor: pointer;
     border-radius: 7px;
     margin-left: 2px;
@@ -187,6 +214,7 @@
     font-style: normal;
     font-size: 14px;
     color:white;
+    display:inline-block;
 }
 #measureADRbutton2{
   border: none;
@@ -208,13 +236,20 @@
 
 
 #addicon,#donebutton{
-    top: 1px;
-    width:30px;
-    /* height:30px; */
-    left: 381px;
+    top: 13px;
+    width:35px;
+    height:38px;
+    left: 2px;
     cursor: pointer;
+    display:inline-block;
+    background-color:#ff5900;
+    border-radius: 7px;
 
 }
+#donebutton{
+  width:50px;
+}
+
 #measureitemsid{
     margin-top: 10px ;
     width: 12ch;
@@ -252,6 +287,7 @@
     margin-top: 10px;
     
 }
+
 #text0{
     width:29ch;
 }
@@ -264,13 +300,14 @@
 #text0,#text1,#text2{
     font-size: 13px;
     /* width: 31.5%; */
-    height: 40px;
+    height: 25px;
     border-radius: 5px;
-    margin-bottom: 13px;
+    margin-bottom: 7px;
     margin-right: 0.2%;
     font-family: "acumin-pro", sans-serif;
     font-weight: 400;
     font-style: normal;
+
     
 }
 #addmctnameid{
@@ -278,8 +315,8 @@
     width:35px;
     height:35px;
     /* left: %; */
-    margin-top: 4px;
-    margin-left: 5px;
+    margin-top: -1px;
+    margin-left: -1px;
     cursor: pointer;
     
    position: absolute;
@@ -292,11 +329,12 @@
     left: 3px;
     cursor: pointer;
     position: relative;
-    background-color: gray;
+    background-color: #ff5900;
     border: none;
     border-radius: 6px;
     color: white;
     font-weight: bold;
+
 }
 #doneebackground:hover{
   color: black;
@@ -330,28 +368,38 @@ cursor: pointer;
     margin-top: 5px;
     
 }
-
+#LegendHist{
+  margin-left: 25px;
+}
 #lvlinput{
     font-size: 13px;
     width: 13ch;
     height: 25px;
     border-radius: 5px;
-    margin-top: 3px;
+    margin-top: 4px;
     margin-left: 9px;
     font-family: "acumin-pro", sans-serif;
     font-weight: 400;
     font-style: normal;
     /* text-align: right; */
+    text-align: right;
+    
     
 }
+
+#areadiv, #prmdiv{
+  margin-top: 10px;
+}
 #radiosColors{
   /* max-width: 50%; */
   display: flex;
+  margin-top: 10px;
   /* margin-left: 5px; */
 }
 #colorpickers{
   max-width: 30%;
-  display: flex;
+  /* display: flex; */
+  display: inline-flex;
 }
 #color{
     margin-top: 1%;
@@ -377,8 +425,9 @@ cursor: pointer;
     width: 350px;
     background-color: #555;
     color: #fff;
-    text-align: center;
-    padding: 5px 0;
+    text-align: justify;
+    text-justify: inter-word;
+    padding: 5px 7px;
     border-radius: 6px;
   
     /* Position the tooltip text */
@@ -403,6 +452,7 @@ cursor: pointer;
     border-width: 5px;
     border-style: solid;
     border-color: #555 transparent transparent transparent;
+    /* border-color: #bdbcbc transparent transparent transparent; */
   }
   
   /* Show the tooltip text when you mouse over the tooltip container */
@@ -422,55 +472,57 @@ cursor: pointer;
 }
 
 /* Navbar container */
-.navbar {
+.tab-nav-container {
     overflow: hidden;
     background-color: #333;
     font-family: Arial;
+    display: flex;
+    align-items: center;
   }
   
 
   /* The dropdown container */
   .dropdown {
-    float: right;
+    /* float: right; */
     overflow: hidden;
   }
 
   
-  /* Dropdown button */
-  .dropdown .dropbtn {
 
-    font-size: 16px;
-    border: none;
-    outline: none;
-    color: white;
-    padding: 14px 16px;
-    background-color: inherit;
-    font-family: inherit; /* Important for vertical align on mobile phones */
-    margin: 0; /* Important for vertical align on mobile phones */
-  }
   
   /* Add a red background color to navbar links on hover */
-  .dropbtn:hover , .dropbtnLinks:hover{
+  .dropbtn:hover , .tab.legends:hover{
     background-color: rgb(0, 153, 255);
   }
-  
+
   /* Dropdown content (hidden by default) */
   .dropdown-content {
     display: none;
+    /* position: -webkit-sticky; Safari */
     position: absolute;
-    margin-left: -13%;
+    right: 0;
+    top: 0;
+    /* margin-left: -13%; */
+    /* margin-right:-80% ; */
+    margin-top: 57px;
     background-color: #f9f9f9;
     min-width: 160px;
     max-width: 36%;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-    z-index: 1;
+    z-index: 999;
     font-family: "acumin-pro", sans-serif;
     font-weight: 400;
     font-style: normal;
     font-size: 13px;
+    float: right;
+  
+    border: none;
+    outline: none;
+ 
+    /* margin: 0; Important for vertical align on mobile phones */
 
   }
-  .dropbtnLinks-content{
+  .tab.legends-content{
     display: none;
     position: absolute;
     
@@ -487,7 +539,7 @@ cursor: pointer;
     margin-top: 20px;
     color: black;
   }
-  .dropbtnLinks-content a {
+  .tab.legends-content a {
     color: black;
     padding: 12px 10x;
     text-decoration: none;
@@ -497,9 +549,9 @@ cursor: pointer;
     margin-top: 5px;
     margin-bottom: 5px;
   }
-  .dropbtnLinks-content a:hover {background-color: #f1f1f1}
+  .tab.legends-content a:hover {background-color: #f1f1f1}
   
-  .dropbtnLinks{
+  .tab.legends{
 
     font-size: 16px;
     border: none;
@@ -511,6 +563,7 @@ cursor: pointer;
     margin: 0; /* Important for vertical align on mobile phones */
     /* position: relative; */
   }
+  
   #userguidetext{
     margin-left: 20px;
     margin-right: 20px;
@@ -544,3 +597,120 @@ cursor: pointer;
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
+/********************************************************************/
+/* Style the tab */
+.tab {
+  overflow: hidden;
+  /* border: 1px solid black; */
+  background-color:black;
+  font-family: "acumin-pro", sans-serif;
+}
+.tab .dropbtn{
+  float:right
+}
+.tablinks{
+  color:white;
+  font-size: 18px;
+}
+/* Style the buttons that are used to open the tab content */
+.tab button {
+  background-color: inherit;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 14px 16px;
+  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 {
+  background-color:  rgb(0, 60, 255);
+}
+
+/* Style the tab content */
+.tabcontent {
+  display: none;
+  /* padding: 6px 12px; */
+  /* border: 1px solid #ccc; */
+  border-top: none;
+
+}
+#createdTimeDiv{
+  vertical-align: top;
+  display: inline-block; 
+}
+/* #allprjdiv{
+  margin-top: -10px;
+} */
+#prjname, #prjpart, #prjsec{
+  font-size: 15px;
+  font-family: "acumin-pro", sans-serif;
+  margin-bottom: 10px;
+  margin-left: 5px;
+  cursor: pointer;
+  font-weight: bold;
+
+  
+}
+.legendtime{
+  margin-left: 54%;
+   
+}
+.legendtime .EditTime{
+  margin-left: 90px;
+}
+#legendtimediv{
+  margin-left: 17%;
+  display: inline-block;
+  /* float: right; */
+  /* position: absolute; */
+  
+}
+
+#legendtimediv:before {
+  content: '';
+  width: 10%;
+  min-width: 100px;
+  max-width: 200px;
+  display: inline-block;
+}
+#legendmodtime{
+  margin-left: 50px;
+}
+#legendmodtime:hover , #legendtime:hover , #legend:hover{
+  cursor: pointer;
+}
+#legendlbldivwhole:hover{
+background-color: lightblue;
+cursor: pointer;
+font-family:  "acumin-pro", sans-serif;
+
+}
+#legendlbldivwhole{
+  font-family:  "acumin-pro", sans-serif;
+}
+.legendclass{
+  color: blue;
+  text-decoration-line: underline;
+  max-width: 40ch;
+  width:40ch;
+  word-wrap: break-word;
+}
+.infotip{
+  justify-content: center;
+  font-family:  "acumin-pro", sans-serif;
+  color:red;
+}
+#CreatesortDesc , #EditsortDesc , #CreatesortAsc, #EditsortAsc{
+  margin-top: 5px;
+}
+#CreatesortDesc:hover , #EditsortDesc:hover , #CreatesortAsc:hover, #EditsortAsc:hover{
+color:gray;
+cursor: pointer;
+}