ags(bar,scripts,i18n): added i18n system(wip), changed some bar stuff and started doing control center

ags/style/_bar.scss

@@ -41,11 +41,15 @@
     }
   }
 
+  // Style widget groups
   & > .bar-centerbox > * {
     background: rgba($color: wal.$background, $alpha: .6);
-    padding: 6px;
+    padding: 5px;
     border-radius: 18px;
 
+    // Style widgets
+    & > *,
+    & > * > button 
     & > * {
       margin: 0 2px;
 
@@ -68,17 +72,18 @@
 
 .workspaces {
   padding: 2px 2px;
+
   & button {
     all: unset;
     border-radius: 16px;
     transition: 80ms linear;
-    padding: 0 12px;
+    padding: 12px 12px;
     background: wal.$color1;
     margin: 1px 2px;
 
     &.focus {
       background: wal.$foreground;
-      padding: 0 20px;
+      padding: 12px 20px;
     }
   }
 }
@@ -108,9 +113,8 @@
 }
 
 .logo button {
-  $padding-inline: 12px;
-  padding-left: $padding-inline;
-  padding-right: calc($padding-inline + 3.9px);
+  padding: 0 11px;
+  padding-right: 16px;
 
   & label {
     font-size: 14px;
@@ -128,6 +132,36 @@
       font-size: 14px;
     }
   }
+
+  &.reveal {
+    & .media > box {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    & .media-controls {
+      padding-left: 3px;
+      border-top-right-radius: 12px;
+      border-bottom-right-radius: 12px;
+      background: scale-color($color: wal.$color3, $lightness: -12%);
+
+      & > button {
+        margin: 0px 1px;
+        border-radius: 4px;
+
+        &:first-child {
+          border-top-left-radius: 12px;
+          border-bottom-left-radius: 12px;
+          margin-left: 0;
+        }
+
+        &:last-child {
+          border-top-right-radius: 12px;
+          border-bottom-right-radius: 12px;
+          margin-right: 0;
+        }
+      }
+    }
+  }
 }
 
 .tray {