Version 0.3.0 - Add of Services

public/stylesheets/style.css

@@ -430,28 +430,7 @@ a {
   font-size: 72px;
 }
 
-.view-popup {
-  position: absolute;
-  background-color: #3D3B3C;
-  backdrop-filter: blur(10px);
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  align-items: center;
-  justify-content: center;
-  padding: 2%;
-  border-radius: 10px;
-}
 
-.view-popup-bar {
-
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row;
-    align-items: center;
-    gap: 20px;
-    width: 100%;
-}
 
 .blur {
 
@@ -494,6 +473,46 @@ a {
   
 }
 
+.view-popup {
+  position: absolute;
+  background-color: #3D3B3C;
+  backdrop-filter: blur(10px);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+  justify-content: center;
+  padding: 2%;
+  border-radius: 10px;
+}
+
+.view-popup-bar {
+
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+    gap: 20px;
+    width: 100%;
+}
+
+.view-close {
+  color: white;
+  transition: 0.1s;
+  cursor: pointer;
+  margin-right: 10px;
+}
+
+.view-close:hover {
+  color: #f01000;
+  
+}
+
+.view-close:active {
+
+  color: #ff5d51;
+}
+
 
 /* Files Explorer */
 
@@ -641,3 +660,66 @@ a {
 
 }
 
+
+/* Services */
+
+.sv {
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  border-radius: 10px;
+  background-color: #1b1b1bc1;
+  transition: 0.1s;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.sv-icon {
+  width: 150px;
+  border-radius: 15px;
+}
+
+.sv-info {
+
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  font-size: 15px;
+  align-items: center;
+
+}
+
+.sv-list {
+
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow-y: auto;
+  height: 85%;
+
+}
+
+.sv-actions {
+  display: flex;
+  flex-direction: column; 
+  gap: 10px;
+  align-items: flex-end;
+}
+.sv-power-select {
+
+  background-color: #323031;
+  padding: 10px;
+  font-size: 14px;
+  border-radius: 10px ;
+}
+
+.sv-power {
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}