Update static/style.css

static/style.css

@@ -1,3 +1,4 @@
+/************Please wait page - appears when the pdf is being uploaded the dropbox************/
 #all{
   position: fixed; /* Sit on top of the page content */
   display: none; /* Hidden by default */
@@ -20,117 +21,23 @@
   transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
 }
-
-.accordion {
-    background-color:#F4C2C2 ; /*gray;*/
-    color: white;
-    cursor: pointer;
-    padding: 8px;
-    width: 100%;
-    text-align: left;
-    border: none;
-    outline: none;
-    transition: 0.4s;
-    border-radius: 5px;
-    font-family: "acumin-pro", sans-serif;
-    font-weight: 400;
-    /* font-style: normal; */
-    font-size: 20px;
-    font-style: italic;
-    /* margin-left: 5px;
-    margin-top: 60px; 
-    margin-right: 10px; */
-
-  }
-  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
-  /*  .active,*/
- .accordion:hover {
-    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;
-    background-color: white;
-    display: none;
-    overflow: auto;
-  }
-
-
-
-
 #rightside{
    
     margin-left:430px ;
     margin-right: 20px;
-  
     position: absolute;
-    
-
 }
 #backgroundimg{
     display: block;
-    /* margin-left:40% ; */
-    /* margin-right: 20px; */
     margin-top: 10px;
     background-color: lightgrey;
-
     width:49%;
     height: 407px;
     position: absolute;
- 
- 
  }
 
  #underimgbuttons{
-    /* display: block; */
-    /* margin-left:40% ; */
-    /* margin-right: 20px; */
     position: relative;
-
-
  }
  ul {
     list-style-type: none;
@@ -224,7 +131,6 @@
 #tomeasurediv, #relvDocdiv{
   margin-top: 7px;
 }
-
 #measureADRbutton{
     background-color: #16c72e;
     border: none;
@@ -450,20 +356,23 @@ cursor: pointer;
   /* margin-left: 5px; */
 }
 #colorpickers{
-  max-width: 30%;
-  /* display: flex; */
-  display: inline-flex;
+  /* display:inline-block; */
+  position: block;
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 #color{
-    margin-top: 1%;
-    /* margin-left: 1%; */
+ 
     box-shadow: 2px 2px 2px gray;
+    height: 40px;
+    width:40px;
 }
 #color:hover{
     cursor: pointer;
     box-shadow: 4px 4px 4px rgb(57, 57, 57);
 }
-#undoButtonId {
+#undoButtonId ,#NewShapeButtonId , #savecanvas{
+  /* margin-top: -30px; */
   background-color: rgba(255, 0, 0, 0.633);
   border: none;
   padding: 10px 50px;
@@ -477,8 +386,23 @@ cursor: pointer;
   color:white;
   display:inline-block;
 }
+#NewShapeButtonId{
+  background-color: rgba(252, 146, 8, 0.849);
+}
+#savecanvas{
+  background-color: #850505e2;
+}
+#NewShapeButtonId:hover{
+  color:black;
+  box-shadow: 0 0 8px 2px  rgba(252, 146, 8, 0.849);
+}
+#savecanvas:hover{
+  color:black;
+  box-shadow: 0 0 8px 2px #850505e2;
+}
 #undoButtonId:hover{
   color:black;
+  box-shadow: 0 0 8px 2px  rgba(255, 0, 0, 0.633);
 }
 /* Tooltip container */
 #infotool {
@@ -531,117 +455,6 @@ cursor: pointer;
     visibility: visible;
     opacity: 1;
   }
-
-
- #secondpage{
-  float: right;
-  margin-right: 10px;
- }
-#userguideheadings{
-  font-size: 14px;
-  font-weight: bold;
-  
-}
-
-/* Navbar container */
-.tab-nav-container {
-    overflow: hidden;
-    background-color: #333;
-    font-family: Arial;
-    display: flex;
-    align-items: center;
-  }
-  
-
-  /* The dropdown container */
-  .dropdown {
-    /* float: right; */
-    overflow: hidden;
-  }
-
-  
-
-  
-  /* Add a red background color to navbar links on 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;
-    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: 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 */
-
-  }
-  .tab.legends-content{
-    display: none;
-    position: absolute;
-    
-    margin-left: -1%;
-    background-color: #f9f9f9;
-    min-width: 25ch;
-    /* max-width: 36%; */
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-    z-index: 1;
-    font-family: "acumin-pro", sans-serif;
-    font-weight: 400;
-    font-style: normal;
-    font-size: 13px;
-    margin-top: 20px;
-    color: black;
-  }
-  .tab.legends-content a {
-    color: black;
-    padding: 12px 10x;
-    text-decoration: none;
-    display: block;
-    margin-left: 7px;
-    margin-right: 7px;
-    margin-top: 5px;
-    margin-bottom: 5px;
-  }
-  .tab.legends-content a:hover {background-color: #f1f1f1}
-  
-  .tab.legends{
-
-    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 */
-    /* position: relative; */
-  }
-  
-  #userguidetext{
-    margin-left: 20px;
-    margin-right: 20px;
-  }
-
- 
   #loading {
     border: 16px solid #f3f3f3;
     border-radius: 50%;
@@ -669,6 +482,7 @@ cursor: pointer;
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
+
 /********************************************************************/
 /* Style the tab */
 .tab {
@@ -713,13 +527,189 @@ cursor: pointer;
   border-top: none;
 
 }
+/*********************************************************************/
+
+.container {
+  /* display: inline-block; */
+  cursor: pointer;
+  margin-top: 5px;
+  display: block;
+  float: left;
+  margin-right: 5px;
+
+}
+
+.bar1, .bar2, .bar3 {
+  width: 30px;
+  height: 5px;
+  background-color: #fcfcfc;
+  margin: 5px 0;
+  transition: 0.4s;
+  margin-left: 5px;
+ 
+}
+
+.change .bar1 {
+  transform: translate(0, 10px) rotate(-45deg);
+}
+
+.change .bar2 {opacity: 0;}
+
+.change .bar3 {
+  transform: translate(0, -10px) rotate(45deg);
+}
+/*Dashed Lines on the left - Menu icon */
+#slider {
+  position: absolute;
+  width:400px;
+  height:900px;
+  background:rgb(179, 179, 179);
+  transform: translateX(-100%);
+  -webkit-transform: translateX(-100%);
+  z-index: 2;
+}
+
+.slide-in {
+  animation: slide-in 0.9s forwards;
+  -webkit-animation: slide-in 0.9s forwards;
+}
+
+.slide-out {
+  animation: slide-out 0.9s forwards;
+  -webkit-animation: slide-out 0.9s forwards;
+}
+  
+@keyframes slide-in {
+  100% { transform: translateX(0%); }
+}
+
+@-webkit-keyframes slide-in {
+  100% { -webkit-transform: translateX(0%); }
+}
+  
+@keyframes slide-out {
+  0% { transform: translateX(0%); }
+  100% { transform: translateX(-100%); }
+}
+
+@-webkit-keyframes slide-out {
+  0% { -webkit-transform: translateX(0%); }
+  100% { -webkit-transform: translateX(-100%); }
+}
+/*Menu options*/
+#menuOptions{
+  margin-left: 5px;
+  font-size: 30px;
+  margin-top: 8px;
+  color: white;
+  font-family: "acumin-pro", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+#menuOptions  li{
+  margin-bottom: 6px;
+  
+  }
+#menuOptions  li:hover{
+color: black;
+cursor: pointer;
+
+}
+/* User Guide Content(hidden by default) */
+  .dropdown-content {
+    display: none;
+    /* position: -webkit-sticky; Safari */
+    position: absolute;
+    right: 0;
+    top: 0;
+    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: 999;
+    font-family: "acumin-pro", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 13px;
+    float: right;
+    border: none;
+    outline: none;
+  }
+    
+  #userguidetext{
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+
+  
+ #secondpage{
+  float: right;
+  margin-right: 10px;
+  cursor: pointer;
+ }
+ #firstpage{
+  cursor: pointer;
+ }
+   
+
+#userguideheadings{
+  font-size: 14px;
+  font-weight: bold;
+  
+}
+#underlinedLables{
+  text-decoration: underline;
+}
+
+/* i info button*/
+#infoImg{
+  width:30px;
+  margin-top: -5px;
+  margin-bottom: -10px;
+  
+  /* margin-left: -200px; */
+}
+
+/*Narbar on top of the page of the legend*/
+.graynavbarLegend{
+  background-color: #b2b2b2;
+  height: 35px;
+  position: relative;
+}
+
+.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;
+}
+
+/*Sorting buttons*/
+
+.sortbutton{
+  background-color: transparent;
+  border: transparent;
+}
+
+/******************************/
 #createdTimeDiv{
   vertical-align: top;
   display: inline-block; 
 }
-/* #allprjdiv{
-  margin-top: -10px;
-} */
+
 #prjname, #prjpart, #prjsec{
   font-size: 15px;
   font-family: "acumin-pro", sans-serif;
@@ -785,4 +775,4 @@ font-family:  "acumin-pro", sans-serif;
 #CreatesortDesc:hover , #EditsortDesc:hover , #CreatesortAsc:hover, #EditsortAsc:hover{
 color:gray;
 cursor: pointer;
-}  
+}