Version 0.4.0 - Ajout des metrics

public/stylesheets/style.css

@@ -293,14 +293,21 @@ a {
 
 .subpanel-box {
 
-  width: 900px;
-  height: 50px;
-  border-radius: 10px;
-  padding: 2%;
+  width: 100%;
+  position: absolute;
+  background-color: #09090963;
+  backdrop-filter: blur(10px);
+  bottom: 0;
+  align-items: center;
+
+  
+}
+
+.subpanel-content {
+
   display: flex;
   justify-content: space-between;
-  background-color: #605e5863;
-  backdrop-filter: blur(10px);
+  padding: 20px;
 }
 
 .subpanel-image {
@@ -310,6 +317,16 @@ a {
   border-radius: 100%;
 }
 
+.subpanel-logo {
+  width: 50px;
+  
+  transition: 0.3s;
+}
+
+.subpanel-logo:hover {
+  transform: scale(0.9);
+}
+
 .subpanel-user {
 
   display: flex;
@@ -319,12 +336,21 @@ a {
 }
 
 .subpanel-userinfo {
-  text-align: start;
+  text-align: end;
   display: flex;
   flex-direction: column;
   gap: 5px;
 }
 
+.subpanel-actions {
+
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  align-items: center;
+
+}
+
 .subpanel-username {
 
   font-size: 14px;
@@ -332,6 +358,66 @@ a {
   margin-block: 0 !important;
 }
 
+.views-items {
+
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 15px;
+}
+
+.view-item {
+
+
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 10px;
+  font-size: 14px;
+  background-color: #3230319d;
+  padding: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
+  border-radius: 15px;
+  transition: 0.3s;
+  user-select: none;
+
+}
+
+.view-item:hover {
+
+  background-color: #4e4b4d9d;
+  cursor: pointer;
+  transform: scale(1.05);
+
+}
+
+.view-item:active {
+
+  background-color: #4e4b4d9d;
+  cursor: pointer;
+  transform: scale(0.975);
+
+}
+
+.view-item p {
+
+  text-align: start;
+}
+.menu-signout {
+
+  color: #ff5d51;
+  cursor: pointer;
+  font-size: 14px;
+  display: grid;
+  grid-template-columns: 0.2fr 0.8fr;
+  gap: 10px;
+}
+
+.dm-element:hover .menu-signout {
+  color: black;
+}
+
 
 .subpanel-dispname {
 
@@ -513,6 +599,17 @@ a {
   color: #ff5d51;
 }
 
+.view-closediv {
+
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+}
+
+.minimized {
+
+  height: 7% !important;
+}
 
 /* Files Explorer */
 
@@ -792,4 +889,81 @@ a {
 .ln-link-url {
 
   font-size: 12px;
+}
+
+/* SERVERS */
+
+.servers {
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 20px;
+  user-select: none;
+  gap: 30px;
+  -webkit-user-select: none;
+}
+
+.servers-box {
+
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  width: 100%;
+}
+
+.servers-box-title {
+
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  padding: 10px;
+  border-radius: 10px;
+  background-color: #1b1b1bc1;
+  transition: 0.1s;
+  justify-content: space-between;
+}
+
+.servers-box-title-info {
+
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+}
+
+.servers-metrics {
+
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.servers-box-content {
+
+  padding: 10px;
+  background-color: #3D3B3C;
+  margin-top: 20px;
+  border-radius: 10px;
+}
+
+.servers-metrics-box {
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+  border-radius: 10px;
+  background-color: #1b1b1bc1;
+  transition: 0.1s;
+}
+
+.servers-metrics-box div {
+
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
 }