✨ ags: add ask popup, make notifications work(finally :3) and more improvements

ags/style/_apps-window.scss

@@ -0,0 +1,5 @@
+.apps-window.container {
+  & > entry {
+
+  }
+}

ags/style/_control-center.scss

@@ -89,7 +89,7 @@
 
         & > .content {
           padding: 8px;
-          padding-right: 0;
+
           & > .icon {
             margin-right: 6px;
           }
@@ -101,7 +101,8 @@
             }
 
             & > .description {
-              font-size: 13px;
+              font-size: 12px;
+              color: colors.$fg-disabled;
               font-weight: 400;
             }
           }
@@ -123,3 +124,36 @@
     }
   }
 }
+
+.pages > .page {
+  background: colors.$bg-secondary;
+  padding: 14px;
+  border-radius: 24px;
+
+  & .header {
+    margin-bottom: 6px;
+
+    & > .title:first-child {
+      font-size: 20px;
+      font-weight: 600;
+    }
+
+    & > .description {
+      font-size: 12px;
+      font-weight: 500;
+      color: colors.$fg-disabled;
+    }
+  }
+
+  &.bluetooth {
+    .connections button {
+      @include mixins.hover-shadow;
+      padding: 6px;
+      border-radius: 12px;
+
+      &.connected {
+        background: colors.$bg-tertiary;
+      }
+    }
+  }
+}

ags/style/_float-notifications.scss

@@ -1,4 +1,5 @@
 @use "./colors";
+@use "./mixins";
 
 .floating-notifications-container {
   padding: {
@@ -6,28 +7,11 @@
     top: 6px;
   };
 
-  & > .notification {
-    background: colors.$bg-primary;
-    border-radius: 16px;
-    padding: 12px;
-    margin: 6px 0;
+  & revealer {
+    padding: 6px;
 
-    & > .top {
-      & .app-name {
-        font-size: 12px;
-        color: colors.$fg-disabled;
-      }
-    }
-
-    & .content {
-      & .image {
-        $size: 78px;
-        min-width: $size;
-        min-height: $size;
-        background-size: cover;
-        background-position: center 0;
-        margin: 6px;
-      }
+    & > .notification {
+      box-shadow: 0 0 4px .5px colors.$bg-translucent;
     }
 
     &:first-child {

ags/style/_logout-menu.scss

@@ -0,0 +1,37 @@
+.logout-menu {
+  .top {
+    .time {
+      font-size: 128px;
+      font-weight: 900;
+    }
+    .date {
+      font-size: 24px;
+      font-weight: 500;
+    }
+  }
+  .button-row {
+    margin: 0 150px;
+
+    & > button {
+      & label {
+        font-size: 96px;
+      }
+
+      margin: {
+        left: 4px;
+        right: 4px;
+      }
+      border-radius: 6px;
+
+      &:first-child {
+        border-top-left-radius: 28px;
+        border-bottom-left-radius: 28px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 28px;
+        border-bottom-right-radius: 28px;
+      }
+    }
+  }
+}

ags/style/_mixins.scss

@@ -14,6 +14,12 @@
   color: colors.$fg-primary;
 }
 
+@mixin hover-shadow {
+  &:hover {
+    box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .1);
+  }
+}
+
 @mixin default-styles {
   .button-row {
     & > button {
@@ -38,6 +44,10 @@
     }
   }
 
+  selection {
+    background: colors.$bg-tertiary;
+  }
+
   label.nf,
   button.nf label {
     font-size: 12px;
@@ -47,28 +57,6 @@
       "Font Awesome";
   }
 
-  & menu {
-    padding: 4px;
-    background: wal.$background;
-    border-radius: 14px;
-                                 
-    & separator {
-      margin: 0 4px;
-      color: wal.$background;
-    }
-                                 
-    & menuitem {
-      padding: 8px 16px;
-      border-radius: 10px;
-      font-size: 12px;
-      font-weight: 600;
-                                 
-      &:hover {
-        background: wal.$color1;
-      }
-    }
-  }
-
   & trough {
     background: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -20%));
     border-radius: 8px;

ags/style/_runner.scss

@@ -0,0 +1,77 @@
+@use "./colors";
+
+.runner.main {
+  background: colors.$bg-translucent;
+  padding: 12px;
+  border-radius: 24px;
+  
+  & > * {
+    margin: 4px 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  & entry {
+    background: colors.$bg-primary;
+    padding: 10px 9px;
+    border-radius: 12px;
+
+    &:focus {
+      box-shadow: inset 0 0 0 2px colors.$bg-secondary;
+    }
+
+    & image.left {
+      margin-right: 6px;
+    }
+  }
+
+  & list {
+    & eventbox:focus > box, 
+    & eventbox:hover > box,
+    & listboxchild:selected eventbox > box,
+    & listboxchild:active eventbox > box {
+      background: colors.$bg-secondary;
+    }
+  }
+
+  & list eventbox > .result {
+    padding: 10px;
+    background: colors.$bg-primary;
+    margin: 2px 0;
+    border-radius: 14px;
+
+    & icon {
+      font-size: 28px;
+      margin-right: 6px;
+    }
+
+    & .title {
+      font-weight: 500;
+      font-size: 16px;
+    }
+
+    & .description {
+      font-size: 12px;
+      color: colors.$fg-disabled;
+    }
+  }
+
+  & .not-found {
+    padding-top: 24px;
+
+    & icon {
+      font-size: 64px;
+      margin-bottom: .4em;
+    }
+
+    & label {
+      font-size: 16px;
+    }
+  }
+}

ags/style/_wal.scss

@@ -1,26 +1,26 @@
 // SCSS Variables
 // Generated by 'wal'
-$wallpaper: "/home/joaov/wallpapers/Bocchi The Rock!.png";
+$wallpaper: "/home/joaov/wallpapers/Miku Guitar.jpg";
 
 // Special
-$background: #0a0a0c;
-$foreground: #c1c1c2;
-$cursor: #c1c1c2;
+$background: #171418;
+$foreground: #c5c4c5;
+$cursor: #c5c4c5;
 
 // Colors
-$color0: #0a0a0c;
-$color1: #935d6d;
-$color2: #967e84;
-$color3: #ac8486;
-$color4: #bcae7a;
-$color5: #a49c9c;
-$color6: #bcb79c;
-$color7: #8a8a96;
-$color8: #565669;
-$color9: #C57C92;
-$color10: #C9A9B0;
-$color11: #E6B1B3;
-$color12: #FBE8A3;
-$color13: #DBD1D0;
-$color14: #FBF5D1;
-$color15: #c1c1c2;
+$color0: #171418;
+$color1: #607985;
+$color2: #208FB6;
+$color3: #4C9CB4;
+$color4: #63ADC9;
+$color5: #C3B49C;
+$color6: #89BBCF;
+$color7: #96909b;
+$color8: #715c71;
+$color9: #6aa4bf;
+$color10: #62a5bc;
+$color11: #78b3c5;
+$color12: #90becf;
+$color13: #dac7ab;
+$color14: #a7cbd9;
+$color15: #c5c4c5;