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 {

ags/style/_control-center.scss

@@ -0,0 +1,54 @@
+@use "./wal";
+
+.control-center-container {
+  all: unset;
+  background: rgba(wal.$background, .6);
+  border-top-left-radius: 16px;
+  border-bottom-left-radius: 16px;
+  margin: 32px 0;
+
+  & * {
+    all: unset;
+    transition: 120ms linear;
+  }
+
+  & {
+    & button {
+      padding: 4px 6px;
+      background: scale-color($color: wal.$color1, $lightness: -20%);
+      border-radius: 12px;
+    }
+
+    & .quickactions {
+      padding: 10px 16px;
+      & .button-row {
+        & > button {
+          margin: 5px 2px;
+          border-radius: 2px;
+          padding: 0 8px;
+          background: rgba($color: scale-color($color: wal.$color1, $lightness: -20%), $alpha: .7);
+
+          & label {
+            font-size: 16px;
+          }
+
+          &:hover {
+            background: rgba($color: scale-color($color: wal.$color1, $lightness: -20%), $alpha: 1);
+          }
+
+          &:first-child {
+            margin-left: 0;
+            border-top-left-radius: 8px;
+            border-bottom-left-radius: 8px;
+          }
+
+          &:last-child {
+            margin-right: 0;
+            border-top-right-radius: 8px;
+            border-bottom-right-radius: 8px;
+          }
+        }
+      }
+    }
+  }
+}

ags/style/_osd.scss

@@ -0,0 +1,37 @@
+@use "./wal";
+
+.osd-window {
+  all: unset;
+
+  .osd {
+    margin-bottom: 100px;
+    background: rgba($color: wal.$background, $alpha: .5);
+    padding: 14px 16px;
+    border-radius: 20px;
+
+    .icon {
+      margin-right: 14px;
+      font-size: 24px;
+    }
+
+    .volume {
+      margin-top: -6px;
+
+      .value {
+        margin-bottom: 5px;
+      }
+
+      levelbar {
+        trough block {
+          border-radius: 6px;
+          background: wal.$background;
+
+          &.filled {
+            padding: 3px 0;
+            background: wal.$color1;
+          }
+        }
+      }
+    }
+  }
+}

ags/style/_wal.scss

@@ -1,26 +1,26 @@
 // SCSS Variables
 // Generated by 'wal'
-$wallpaper: "/home/joaov/wallpapers/Garden Kita.png";
+$wallpaper: "/home/joaov/wallpapers/Miku, Rin and Luka Chibi.jpg";
 
 // Special
-$background: #101212;
-$foreground: #c3c3c3;
-$cursor: #c3c3c3;
+$background: #3d2217;
+$foreground: #cec7c5;
+$cursor: #cec7c5;
 
 // Colors
-$color0: #101212;
-$color1: #59662a;
-$color2: #517047;
-$color3: #87863c;
-$color4: #707b48;
-$color5: #4b6266;
-$color6: #84876e;
-$color7: #8e9898;
-$color8: #596d6d;
-$color9: #778839;
-$color10: #6C965F;
-$color11: #B4B350;
-$color12: #96A460;
-$color13: #658388;
-$color14: #B0B493;
-$color15: #c3c3c3;
+$color0: #3d2217;
+$color1: #b38678;
+$color2: #a4998a;
+$color3: #b39e8a;
+$color4: #a5a09b;
+$color5: #aea299;
+$color6: #b4aea2;
+$color7: #a39c99;
+$color8: #7f6f68;
+$color9: #EFB3A1;
+$color10: #DBCCB9;
+$color11: #EFD3B9;
+$color12: #DDD6CF;
+$color13: #E8D8CD;
+$color14: #F1E8D9;
+$color15: #cec7c5;