✨ ags: make osd work, new window management system, lots of improvements

ags/style/_bar.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "./wal";
 @use "./mixins";
 
@@ -5,7 +6,7 @@
   padding: 6px;
   padding-bottom: 0px;
 
-  & * {
+  & {
     button {
       padding: 6px 8px;
       border-radius: 12px;
@@ -73,9 +74,9 @@
     & > .text-content {
       & > .class {
         font-size: 9px;
-        font-weight: 500;
         font-family: monospace;
-        color: adjust-hue($color: wal.$foreground, $degrees: 100deg);
+        font-weight: 600;
+        color: color.adjust($color: wal.$foreground, $lightness: -11%);
         margin-top: 1px;
       }
       
@@ -100,7 +101,7 @@
     & > .media > box {
       border-radius: 12px;
       background: wal.$color1;
-      padding: 0 6px;
+      padding: 0 7px;
 
       & .icon {
         margin-right: 6px;
@@ -110,19 +111,25 @@
 
     &.reveal {
       & .media > box {
+        transition: 50ms linear;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
       }
       & .media-controls {
-        padding-left: 3px;
+        padding-left: 6px;
         border-top-right-radius: 12px;
         border-bottom-right-radius: 12px;
-        background: scale-color($color: wal.$color1, $lightness: -20%);
+        transition: unset;
+        background: linear-gradient(to left, color.adjust($color: wal.$color1, $lightness: -15%) 45px, wal.$color1);
 
         & > button {
           margin: 0px 1px;
           border-radius: 4px;
 
+          &:hover {
+            background: wal.$color2;
+          }
+
           &:first-child {
             border-top-left-radius: 12px;
             border-bottom-left-radius: 12px;
@@ -167,6 +174,11 @@
       background: wal.$color1;
     }
 
+    & .notification-bell {
+      padding-left: 10px;
+      padding-right: 4px;
+    }
+
     & > box {
       padding: 0 9px;
       border-radius: 12px;
@@ -180,10 +192,4 @@
       margin-right: 4px;
     }
   }
-
-  .cc-toggle button {
-    $padding-inline: 12px;
-    padding-left: $padding-inline;
-    padding-right: calc($padding-inline + 2px);
-  }
 }

ags/style/_control-center.scss

@@ -4,23 +4,65 @@
 .control-center-container {
   background: rgba(wal.$background, .65);
   border-radius: 24px;
-  padding: 24px 22px;
+  padding: 20px 14px;
 
-  & {
-    & button {
-      padding: 4px 6px;
+  & > box {
+    margin: 9px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  & .quickactions {
+    & .hostname {
+      font-size: 15px;
+      font-weight: 600;
     }
 
-    & .quickactions {
-      background: wal.$color1;
-      & .hostname {
-        font-size: 15px;
-        font-weight: 600;
-      }
+    & .uptime {
+      font-size: 12px;
+    }
 
-      & .uptime {
-        font-size: 12px;
+    & .button-row {
+      & button {
+        padding: 4px 6px;
       }
     }
   }
+
+  & .sliders {
+    padding: 2px 6px;
+
+    & > box {
+      margin: 8px 0;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    icon {
+      background-size: 48px;
+    }
+
+    trough {
+      background: color.adjust($color: wal.$color1, $lightness: -20%);
+      min-height: .8em;
+      border-radius: 8px;
+    }
+
+    trough highlight {
+      background: wal.$color1;
+      min-height: inherit;
+      border-radius: inherit;
+    }
+  }
 }

ags/style/_mixins.scss

@@ -0,0 +1,8 @@
+@use "sass:color";
+@use "./wal";
+
+@mixin reset-props {
+  all: unset;
+  transition: 120ms linear;
+  color: color.adjust($color: wal.$foreground, $lightness: -15%);
+}

ags/style/_osd.scss

@@ -1,37 +1,45 @@
+@use "sass:color";
 @use "./wal";
 
-.osd-window {
-  all: unset;
+.osd {
+  background: color.change($color: wal.$background, $alpha: 65%);
+  padding: 14px 16px;
+  border-radius: 20px;
 
-  .osd {
-    margin-bottom: 100px;
-    background: rgba($color: wal.$background, $alpha: .5);
-    padding: 14px 16px;
-    border-radius: 20px;
+  .icon {
+    margin-right: 14px;
+    font-size: 24px;
+  }
 
-    .icon {
-      margin-right: 14px;
-      font-size: 24px;
+  .volume {
+    margin-top: -6px;
+
+    .device {
+      margin-bottom: 5px;
+      font-size: 14px;
+      font-weight: 600;
     }
 
-    .volume {
-      margin-top: -6px;
+    levelbar {
+      trough block {
+        border-radius: 2px;
+        background: color.adjust($color: wal.$color1, $lightness: -36%);
 
-      .value {
-        margin-bottom: 5px;
-      }
+        &.empty {
+          border-radius: 2px;
+        }
 
-      levelbar {
-        trough block {
-          border-radius: 6px;
-          background: wal.$background;
-
-          &.filled {
-            padding: 3px 0;
-            background: wal.$color1;
-          }
+        &.filled {
+          padding: 3px 0;
+          background: wal.$color1;
         }
       }
     }
+
+    .value {
+      font-size: 11px;
+      font-weight: 400;
+      padding: 0 4px;
+    }
   }
 }