DEV_2

public/stylesheets/style.css

@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
 
+
 body {
 
   background: rgb(58, 56, 56);
@@ -7,18 +8,18 @@ body {
   padding: 0;
   font-family: 'Roboto', sans-serif;
   color: white;
+ 
 }
 
 .content {
 
 
   padding: 3%;
-  width: 100%;
-  height: 100%;
   display: flex;
-    align-items: center;
-    justify-content: center;
-}
+ 
+} 
+
+/*CSS for Login*/
 
 @media (max-width: 768px) { 
   
@@ -30,6 +31,7 @@ body {
     border-radius: 1vw;
     box-shadow: 5px 5px 5px rgba(80, 80, 80, 0.477) ;
   }
+  
 
 } 
 
@@ -60,15 +62,24 @@ body {
   border-style: hidden;
   border-radius: 1vw;
   transition: all 0.2s ease 0s;
+  padding-left: 1vw;
 
 }
 
 .box form input:hover {
 
+  box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.477) ;
+
+}
+
+
+.box form input:focus {
+
   box-shadow: 5px 5px 5px rgba(0, 174, 255, 0.477) ;
 
 }
 
+
 .box form .inp {
 
   margin: 2%;
@@ -78,6 +89,7 @@ body {
 
   border-style:solid;
   border-radius: 1vw;
+  border-color: white;
   padding: 1%;
   margin: 3%;
   transition: all 0.2s ease 0s;
@@ -103,7 +115,7 @@ body {
   transition: all 0.2s ease 0s;
   color: white;
   background-color: transparent;
-  border-color: black;
+  border-color: white;
   box-shadow: none;
 }
 
@@ -120,4 +132,364 @@ body {
   color: #ff0012;
   font-size: larger;
  
-}
+}
+
+/*CSS for Dashboard*/
+
+
+.header {
+  
+  justify-content: space-between;
+  text-align: center;
+  margin: 0%;
+  font-family: 'Barlow', sans-serif;
+  --bs-gutter-x: 0rem;
+}
+
+.header p {
+
+  cursor: pointer;
+
+}
+
+
+
+
+
+.edropdown {
+  display: inline-block;
+  position: relative;
+  --bs-gutter-x: 0rem;
+  
+}
+.edropdown-content {
+  text-align: center;
+  display: none;
+  background-color: rgb(80, 80, 80);
+  position: absolute;
+  width: 90%;
+  right: 5%;
+  padding: 0%;
+  bottom: 15%;
+  overflow: auto;
+  border-radius: 1vw;
+  box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
+  transition: all 0.1s ease 0s;
+  margin-left: 1%;
+
+}
+
+.viewbar {
+
+  display: block !important;
+
+}
+
+.edropdown-content a {
+  display: block;
+  color: white;
+  padding: 4%;
+  text-decoration: none;
+  transition: all 0.1s ease 0s;
+}
+
+
+
+.edropdown-content .logout {
+
+  color: red;
+
+}
+
+.edropdown-content .logout:hover {
+  color: white;
+  background-color: red;
+}
+
+.edropdown-content a:hover {
+  color: black;
+  background-color: white;
+}
+
+
+.edropdown-content p {
+  display: block;
+  color: white;
+  padding: 4%;
+  text-decoration: none;
+  transition: all 0.1s ease 0s;
+}
+
+.edropdown-content p:hover {
+  color: black;
+  background-color: white;
+}
+
+
+
+
+@media (min-width: 992px) { 
+  
+  .logo {
+
+    content: url("/images/minlogo.png");
+    transition: all 0.3s ease 0s;
+
+  }
+  
+
+  .sidebar:hover .logo {
+    content: url("/images/logo.png");
+    transform: scale(0.85);
+   
+  }
+  
+  .sidebar {
+      
+      
+      width: 5%;
+      position: fixed;
+      height: 100%;
+      background-color: rgb(32, 32, 32);
+      transition: all 0.4s ease 0s;
+      
+  }
+  
+  .sidebar:hover {
+  
+    width: 15%;
+
+  
+  }
+
+  .d-content {
+   
+
+    margin-left: 5%;
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    padding: 3%;
+    padding-right: 8%;
+    transition: all 0.4s ease 0s;
+    overflow:scroll;
+    overflow-x:hidden;
+ 
+}
+
+  .sidecontent{
+    
+      
+    margin-left: 15% !important;
+    padding-right: 15%;
+
+  }
+  
+  .sidebar-content {
+
+    text-align: center;
+    height: 85%;
+    padding-top: 50%;
+    padding-bottom: 50%;
+   
+  }
+
+  .sidebar:hover .sidebar-content {
+
+    height: 80%;
+  }
+
+  .sidebar:hover .sidebar-footer{
+
+    text-align: unset;
+    padding-top: 5%;
+    padding-left: 30%;
+  }
+
+  .sidebar-footer {
+
+    height: 5%;
+    text-align: center;
+    
+  }
+
+  .sidebar-footer:hover {
+
+    background-color: white;
+    color: black;
+    cursor: pointer;
+    height: 10%;
+   
+    
+  }
+
+  .sidebar-image {
+    border-radius: 100%;
+     vertical-align: center;
+     align-items: center;
+     align-self: center;
+  }
+
+  .sidebar:hover .sidebar-image {
+
+    display: unset;
+
+  }
+
+
+  .sidebar-text {
+
+    display: none;
+    -moz-user-select: none; /* Firefox */
+    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
+    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
+    user-select: none; /* Propriété standard */
+  }
+
+  .username {
+    
+ 
+    display: none;
+    -moz-user-select: none; /* Firefox */
+    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
+    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
+    user-select: none; /* Propriété standard */
+    
+  }
+
+  .account {
+
+    display: flex;
+    justify-content: center;
+    vertical-align: center;
+  
+  }
+
+
+
+  .sidebar:hover .username {
+
+    display: unset;
+    
+    
+    
+  }
+
+  .sidebar:hover .sidebar-text {
+
+    display: unset;
+  }
+
+
+  .sidebar-item {
+
+    transition: all 0.2s ease 0s;
+    padding: 5%;
+    margin-top: 5%;
+    margin-bottom: 5%;
+  }
+
+  .sidebar-item:hover {
+
+    background-color: white;
+    color: black;
+    cursor: pointer;
+   
+    
+  }
+
+
+
+  
+
+
+} 
+
+@media (max-width: 992px) { 
+
+  .sidebar {
+      
+    font-size: 7vw;
+    width: 100%;
+    background-color: rgb(32, 32, 32);
+    transition: all 0.4s ease 0s;
+    
+  }
+
+  .sidebar-content {
+
+    text-align: center;
+    height: 80%;
+   
+  }
+
+
+
+  .sidebar-footer {
+
+    height: 5%;
+    text-align: unset;
+    padding-top: 5%;
+    padding-left: 30%;
+    
+  }
+
+  .sidebar-footer:hover {
+
+    background-color: white;
+    color: black;
+    cursor: pointer;
+    height: 10%;
+   
+    
+  }
+
+  .sidebar-image {
+    border-radius: 100%;
+   
+  }
+
+  .sidebar:hover .sidebar-image {
+
+    display: unset;
+
+  }
+  
+
+
+  .sidebar-text {
+
+    display: none;
+    -moz-user-select: none; /* Firefox */
+    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
+    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
+    user-select: none; /* Propriété standard */
+  }
+  
+
+  .sidebar:hover .sidebar-text {
+
+    display: unset;
+  }
+
+
+  .sidebar-item {
+
+    transition: all 0.2s ease 0s;
+    padding: 5%;
+    margin-top: 5%;
+    margin-bottom: 5%;
+  }
+
+  .sidebar-item:hover {
+
+    background-color: white;
+    color: black;
+    cursor: pointer;
+   
+    
+  }
+
+}
+
+