adding features to net info

config/eww/eww.scss

@@ -9,8 +9,9 @@
     border-radius: 20px;
     border-color: #db5e5e;
     border-style: solid;
-    border-width: 1px;
+    //border-width: 1px;
 }
+
 .buttons {
     padding: 10px;
     background-color: rgba(172, 89, 89, 0.4);
@@ -19,12 +20,19 @@
     border-style: solid;
     border-width: 1px;
     
+}
+.header {
+    background-color: #221f1f;
+    border-radius: 20px;
+    padding: 5px;
+    
 }
 .topcontent {
     margin-top: 50px;
-    padding: 20px;
-    background-color: rgba(29, 29, 29, 0.2);
-    border-radius: 100px;
+    padding: 10px;
+    //background-color: rgba(29, 29, 29, 0.2);
+    background-color: #221f1f;
+    border-radius: 20px;
     //border-color: #db5e5e;
     //border-style: solid;
     border-width: 1px;
@@ -32,19 +40,75 @@
 .centercontent {
     padding: 20px;
     //margin: 10px;
-    background-color: rgba(37, 23, 23, 0.4);
+    //background-color: rgba(37, 23, 23, 0.4);
+    background-color: #221f1f;
     border-radius: 20px;
     //border-color: #db5e5e;
     //border-style: solid;
     border-width: 1px;
 }
+
+.vpncontent {
+    padding-left: 75px;
+    padding-right: 75px;
+    padding-bottom: 0px;
+    border-radius: 20px;
+    background-color: #221f1f;
+}
+.netcontent {
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 7px;
+    padding-bottom: 13px;
+    border-radius: 20px;
+    background-color: #221f1f;
+}
 .bottomcontent {
     padding: 10px;
 }
+.neticon {
+    font-size: 50px;
+    padding-left: 70px;
+}
+.nettext {
+    padding-left: 70px;
+}
+.vpnicon { 
+    font-size: 50px;
+}
+.netgraph {
+    background-color: #db5e5e;
+    border-style: solid;
+    border-width: 1px;
+    border-color: #2b1111;
+    color: #bb5a5a;
+}
 .infolabel {
     padding: 20px;
 }
+.name {
+    padding : 0px;
+}
+.translation {
+    padding: 1px;
+    margin-right: 11px;
+    font-size: 80%;
+}
 
+.exitbutton {
+    font-size: 140%;
+    padding-right: 10px;
+    
+}
+.infobutton {
+    font-size: 120%;
+    padding-left: 10px;
+    
+}
+.infobutton:hover, .exitbutton:hover {
+    color:#ad3535;
+    transition: all 1s ease;
+}
 /*
 [scratchpads.network]
 command = "nm-connection editor"